CSS 'border-block-width' Property Explained

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.

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