CSS 'border-block-end-width' Property Explained

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.

Ryan Parker

Ryan has been a standout in digital marketing since 2010. He's the go-to person for getting businesses noticed online, with over 300 projects under his belt—these range from helping local business owners to big online stores. As the Head of Digital Marketing at Webzstore Solutions, Ryan knows all the tricks to make companies shine on the internet. He's excellent at using the latest tech and smart strategies to get results. Ryan is all about making businesses grow and reach more people online.

All Posts Website