CSS border-block-end Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 10 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-block-end property in CSS is a logical property that allows you to set the style, width, and color of the border on the block-end side of an element. The block-end side refers to the end of the block flow, which changes depending on the writing mode.

This property is useful for controlling the border in a way that adapts to different languages and text directions.

💡 Syntax

The syntax for the border-block-end property is as follows:

Syntax

Copied

element {
  border-block-end:  ||  || ;
}

You can use this shorthand to define the border's width, style, and color all at once. Alternatively, you can set these values individually using border-block-end-width, border-block-end-style, and border-block-end-color.

🎛️ Default Value

The default value for the border-block-end property depends on the individual border properties:

border-block-end-width: medium
border-block-end-style: none
border-block-end-color: currentcolor

🏠 Property Values

Value	Description
<border-width>	Specifies the width of the border. It can be a length (e.g., 2px), a keyword (thin, medium, thick), or it can be omitted, defaulting to medium.
<border-style>	Specifies the style of the border, such as solid, dotted, dashed, double, etc.
<border-color>	Specifies the color of the border. It can be a named color, hexadecimal value, RGB, HSL, or currentcolor.

📄 Example

In this example, we'll apply a 3px solid blue border to the block-end side of a paragraph.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS border-block-end Example</title>
  <style>
    p {
      border-block-end: 3px solid blue;
    }
  </style>
</head>
<body>
  <h1>Paragraph with border-block-end</h1>
  <p>
    This paragraph has a 3px solid blue border on the block-end side, which adapts to different writing modes.
  </p>
</body>
</html>

🖥️ Browser Compatibility

The border-block-end property is well-supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. However, testing your website across different browsers and environments is always recommended to ensure full compatibility.

🎉 Conclusion

The border-block-end property is a versatile tool for applying borders in a way that respects the logical flow of content, particularly in multilingual websites.

By using logical properties like this, you can create designs that are more adaptable and maintainable. Experiment with different border styles, widths, and colors to see how this property can enhance your layouts.