Webzstore
The CSS 'border-block-end-width' property specifies the border width at the block-end of an element. As part of the CSS Logical Properties, it adapts to the writing mode, making it an essential tool for designing layouts that need to be consistent across languages with different text directions. This property allows for precise control over the thickness of the block-end border, enhancing the adaptability and accessibility of web designs in a global context.
CSS 'border-block-end-width' Property Examples
See the Pen CSS 'border-block-end-width' Property by Webzstore (@webzstore) on CodePen.
The 'border-block-end-width' property plays a crucial role in the CSS Logical Properties suite. It allows designers to precisely control the visual weight of borders in layouts that accommodate multiple writing modes, thereby supporting the creation of truly global and accessible web content.
Browser Support For 'border-block-end-width' Property
 |  |  |  |  |
| 41.0 | 12.1 | 69.0 | 79.0 | 56.0 |
CSS Syntax of the 'border-block-end-width' Property
border-block-end-width: medium | thin | thick | length | initial | inherit;Usage of the 'border-block-end-width' Property
Use 'border-block-end-width' to set the thickness of the border at the end of an element's block flow. This can be the bottom border in horizontal writing modes or the right border in vertical writing modes. It's particularly useful for responsive designs and content that requires internationalization, ensuring that border width is logically applied based on the content's flow.
Property Values of the 'border-block-end-width' Property
- Medium: Sets the border width to the medium thickness. This is the default value.
- Thin: Sets the border width to a thin thickness.
- Thick: Sets the border width to a thick thickness.
- Length: Specifies the border width using a specific measurement (like px, em, etc.).
- Initial: Resets the 'border-block-end-width' to its default value (medium).
- Inherit: Inherits the 'border-block-end-width' from the element's parent.
