Webzstore
The CSS 'border-block-width' property is a shorthand for specifying the width of an element's block-start and block-end borders. This logical property adjusts according to the document's writing mode, allowing for consistent border widths that align with the flow of content. It's beneficial in responsive and internationalized web designs, where the layout and direction of text may vary.
CSS 'border-block-width' Property Examples
See the Pen CSS 'border-block-width' Property by Webzstore (@webzstore) on CodePen.
The 'border-block-width' property enhances CSS's ability to create flexible, writing-mode-aware layouts, supporting the development of content that is accessible and visually consistent across different languages and writing systems.
Browser Support For 'border-block-width' Property
 |  |  |  |  |
| 66.0 | 14.1 | 87.0 | 87.0 | 73.0 |
CSS Syntax of the 'border-block-width' Property
border-block-width: medium | thin | thick | length | initial | inherit;
Usage of the 'border-block-width' Property
Use 'border-block-width' to set uniform widths for the borders at the start and end of the block flow within an element. This property simplifies defining border widths in a writing mode-aware manner, ensuring that designs remain flexible and adaptable across different languages and writing systems.
Property Values of the 'border-block-width' Property
- Medium: Applies a medium thickness to both the block-start and block-end borders. This is the default value.
- Thin: Applies a thin thickness to the borders.
- Thick: Applies a thick thickness to the borders.
- Length: Specifies the width of the borders using CSS length values (e.g., px, em).
- Initial: Resets the 'border-block-width' to its default value (medium).
- Inherit: The element inherits the 'border-block-width' from its parent element.
