CSS border-block-end-width Property

Posted in CSS Tutorial

Updated on Aug 16, 2024

By Mari Selvan

👁️ 7 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-block-end-width property in CSS is used to set the width of the border at the block-end of an element. The block-end is defined based on the element's writing mode, meaning it could be the bottom or right side depending on the text direction.

This property is part of the CSS Logical Properties and Values module, which allows for more flexible styling in different writing modes and text directions.

💡 Syntax

The syntax for the border-block-end-width property is straightforward. It can accept various units to define the width of the border.

Syntax

Copied

element {
  border-block-end-width: value;
}

🎛️ Default Value

The default value of the border-block-end-width property is medium, which typically corresponds to a width of around 3-4 pixels depending on the browser's default settings.

🏠 Property Values

Value	Description
thin	A thin border width (typically 1px).
medium	A medium border width (default value, typically 3-4px).
thick	A thick border width (typically 5-6px).
length	A specific width defined using a length unit like px, em, rem, etc.
initial	Sets the property to its default value.
inherit	Inherits the property value from its parent element.

📄 Example

In this example, we'll set the border-block-end-width to 5px for a div element.

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-width Example</title>
  <style>
    div {
      border-block-end-width: 5px;
      border-style: solid;
      border-color: black;
    }
  </style>
</head>
<body>
  <h1>Block-End Border Width Example</h1>
  <div>
    This is a div with a block-end border width of 5px.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-block-end-width property is supported in most modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. However, since it's part of the CSS Logical Properties module, older browsers may not fully support it. Testing across different browsers is recommended to ensure compatibility.

🎉 Conclusion

The border-block-end-width property provides a flexible way to control the width of an element's block-end border, especially in environments with varying text directions and writing modes.

By using this property, you can ensure that your layout remains consistent and visually appealing across different languages and browser settings.