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

The CSS 'border-block-start-width' property sets the width of the border at the block-start of an element. Tailored to the document's writing mode, it defines the border's thickness at the start of the block flow. It could be the top border in horizontal writing modes or the left border in vertical writing modes. It's part of the CSS logical properties and values. It is designed to support layouts that adapt seamlessly across different languages and writing systems.

CSS 'border-block-start-width' Property Examples

See the Pen CSS 'border-block-start-width' Property by Webzstore (@webzstore) on CodePen.

The 'border-block-start-width' property provides a flexible tool for designing border widths that respect the logical flow of content, supporting the creation of accessible, adaptable, and internationally friendly web designs.

Browser Support For 'border-block-start-width' Property

41.0	12.1	69.0	79.0	56.0

CSS Syntax of the 'border-block-start-width' Property

border-block-start-width: medium | thin | thick | length | initial | inherit ;

Usage of the 'border-block-start-width' Property

Use 'border-block-start-width' to control the thickness of the border at the beginning of an element's block flow direction. This property is essential for responsive designs and content requiring internationalization, as it ensures that border width is logically applied based on the content's flow, enhancing the design's consistency and adaptability.

Property Values of the 'border-block-start-width' Property

• Medium: Specifies a medium thickness for the border. This is the default value.
• Thin: Specifies a thin thickness for the border.
• Thick: Specifies a thick thickness for the border.
• Length: Allows for an explicit size to be set for the border's thickness, using CSS length units (e.g., px, em).
• Initial: Resets the 'border-block-start-width' to its default value (medium).
• Inherit: The element inherits the 'border-block-start-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