CSS border-block-width Property

Posted in CSS Tutorial

Updated on Oct 01, 2024

By Mari Selvan

👁️ 12 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The border-block-width property in CSS is a shorthand property that sets the width of the border on the block-start and block-end edges of an element. These edges correspond to the top and bottom borders in a horizontal writing mode, or the left and right borders in a vertical writing mode.

This property is part of the logical properties module, which allows for more flexible and context-aware styling.

💡 Syntax

The syntax for the border-block-width property can include one or two values:

Syntax

Copied

element {
  border-block-width: value;
}

One value: Applies the same width to both the block-start and block-end edges.
Two values: The first value sets the width of the block-start edge, and the second value sets the width of the block-end edge.

🎛️ Default Value

The default value of the border-block-width property is medium, which typically means 3px, depending on the browser's default settings.

🏠 Property Values

Value	Description
thin	A thin border width.
medium	A medium border width (default).
thick	A thick border width.
length	A specific measurement using units such as px, em, rem, etc.
initial	Sets the property to its default value.
inherit	Inherits the value from the parent element.

📄 Example

In this example, we'll set different border widths for the block-start and block-end edges of 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-width Example</title>
  <style>
    div {
      border-block-width: 5px 10px;
      border-style: solid;
      border-color: blue;
    }
  </style>
</head>
<body>
  <h1>Div with Custom Block Border Widths</h1>
  <div>
    This div has a 5px border on the block-start edge and a 10px border on the block-end edge.
  </div>
</body>
</html>

🖥️ Browser Compatibility

The border-block-width property is supported in modern browsers, including the latest versions of Chrome, Firefox, Safari, Edge, and Opera. Since it is a part of the logical properties module, which is relatively new, ensure to test your styles across different browsers to confirm compatibility.

🎉 Conclusion

The border-block-width property is a powerful tool for developers who want to control the border widths on block-level elements more intuitively. It simplifies the styling process, especially for multi-language websites or layouts that need to adapt to different writing modes. By using this property, you can easily create responsive and adaptable designs that work across various languages and writing directions.