CSS Border-Block-Width A Comprehensive Guide

Introduction

The border-block-width property in CSS is used to set the width of the logical block borders of an element, which can change based on the writing mode, directionality, and text orientation. Introduced in September 2021, this property has become widely available and works across many devices and browser versions. By using border-block-width, you can ensure consistent border styling for elements, making your web designs more adaptable and visually appealing.

Description and Functionality

The border-block-width property in CSS is used to set the width of an element’s borders in the block direction. It defines the thickness of the block-start and block-end borders, adapting to the writing mode of the element. This property is particularly useful for creating consistent border styling across different text flow directions.

For example, in vertical writing modes, border-block-width sets the width of the top and bottom borders. In horizontal writing modes, it affects the left and right borders. This adaptability makes border-block-width a powerful tool for web designers who need to create responsive and flexible layouts that look good in various reading directions.

Syntax and Values

The border-block-width property in CSS allows you to specify the width of the logical block borders of an element. Here is the syntax and the values you can use with this property:

/* <'border-width'> values */
border-block-width: 5px;
border-block-width: thick;

/* Global values */
border-block-width: inherit;
border-block-width: initial;
border-block-width: revert;
border-block-width: revert-layer;
border-block-width: unset;

Values

• <'border-width'>: This value sets the width of the border. It can be specified using lengths (e.g., 5px) or keywords like thin, medium, and thick.

The global values include:

• inherit: The element inherits the border width from its parent.
• initial: The element uses the initial value, which is medium.
• revert: The element reverts to the default value as specified by the user agent.
• revert-layer: Similar to revert, but also considers the cascade layer.
• unset: The element uses the inherited value if the property is inherit-able, otherwise, it uses the initial value.

Formal Definition

The border-block-width property in CSS is formally defined to set the width of the logical block borders of an element. This property adapts to the writing mode, directionality, and text orientation of the element, ensuring consistent border styling regardless of the text flow direction.

Formal Syntax

The formal syntax for border-block-width is as follows:

border-block-width =
  [<'border-top-width'>]{1,2}

<border-top-width> =
  <line-width>

<line-width> =
  [<length [0,∞]>] | thin | medium | thick

Examples and Usage

The border-block-width property is a versatile tool that can be used in various scenarios to enhance the visual appeal and consistency of your web designs. Below are some practical examples demonstrating how to use this property effectively.

Example: Setting Block Border Width in Vertical Text

In this example, we use the border-block-width property to set the width of block borders for text that is oriented vertically. This is particularly useful for creating designs that cater to different writing modes.

HTML

<div>
  <p class="exampleText">Example text</p>
</div>

CSS

div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  border: 1px solid blue;
  border-block-width: 5px;
}

Example: Combining with Inline Border Width

In this example, we use the border-block-width property in combination with border-inline-width to set the width of both block and inline borders. This allows for more precise control over the border styling.

HTML

<div class="exampleBox">
  <p>This is a sample text.</p>
</div>

CSS

.exampleBox {
  background-color: lightblue;
  width: 200px;
  height: 100px;
  border: 2px solid black;
  border-block-width: 10px;
  border-inline-width: 5px;
}

Example: Responsive Design with Different Writing Modes

In this example, we use the border-block-width property to create a responsive design that adapts to different writing modes. This is particularly useful for internationalization and localization efforts.

HTML

<div class="responsiveBox">
  <p>This is a responsive design example.</p>
</div>

CSS

.responsiveBox {
  background-color: lightgreen;
  width: 300px;
  height: 150px;
  border: 3px solid darkgreen;
  border-block-width: 8px;
  writing-mode: vertical-rl;
}

Example: Using Global Values

In this example, we demonstrate how to use global values with the border-block-width property. This allows for more dynamic and flexible border styling.

HTML

<div class="globalValuesBox">
  <p>This is an example using global values.</p>
</div>

CSS

.globalValuesBox {
  background-color: lightcoral;
  width: 250px;
  height: 120px;
  border: 4px solid darkred;
  border-block-width: inherit;
}

Specifications

The border-block-width property is defined in the CSS Logical Properties and Values Level 1 specification. This standard outlines the behavior and usage of logical properties, which adapt to the writing mode, directionality, and text orientation of an element. By following this specification, developers can ensure that their designs are consistent and adaptable across different text flow directions.

Specification Details

• Specification Name: CSS Logical Properties and Values Level 1
• Property Definition: border-block-width

Browser Compatibility

The border-block-width property enjoys widespread support across various browsers, making it a reliable tool for web developers and designers. Since its introduction in September 2021, this property has been implemented in major browsers, ensuring consistent functionality and appearance across different platforms.

Supported Browsers

• Google Chrome
• Microsoft Edge
• Mozilla Firefox
• Opera
• Safari

How to Check Browser Compatibility

1. Visit the BCD Tables: Access the BCD tables to view the compatibility data for the border-block-width property.
2. Enable JavaScript: Ensure that JavaScript is enabled in your browser to view the data.
3. Review the Data: Check the compatibility details to understand the level of support for the border-block-width property across different browsers and versions.

Related Properties and See Also

To fully utilize the border-block-width property in your web designs, it’s essential to understand related properties and resources that can enhance your workflow.

Related Properties

1. CSS Logical Properties and Values: This specification outlines the behavior and usage of logical properties, which adapt to the writing mode, directionality, and text orientation of an element.
   • CSS Logical Properties and Values
2. Physical Border Properties: The border-block-width property maps to one of the physical border properties depending on the writing mode and directionality. These properties include:
   • border-top-width
   • border-right-width
   • border-bottom-width
   • border-left-width
3. Writing Mode and Text Orientation: These properties define the writing mode, directionality, and text orientation of an element, which can affect the behavior of the border-block-width property.
   • writing-mode
   • direction
   • text-orientation

Additional Resources

• MDN Web Docs: Mozilla Developer Network (MDN) offers detailed documentation on CSS properties, including border-block-width. You’ll find explanations, examples, and compatibility info.
  • MDN Web Docs - border-block-width
• W3C Specifications: The World Wide Web Consortium (W3C) provides specifications that define CSS properties. The CSS Logical Properties and Values Level 1 specification offers in-depth insights into logical properties.
  • CSS Logical Properties and Values Level 1

By exploring these resources, you can gain a deeper understanding of how to use the border-block-width property effectively in your web designs.