CSS border-block-width Property

The border-block-width property sets the width of an element's borders in the block direction. It defines the thickness of the block-start and block-end borders, adapting to the writing mode. This property ensures consistent border styling for elements, regardless of text flow direction.

Syntax:

border-block-width: width;

Property values:

• width: This property holds the width of the border.

The below examples illustrate the border-block-width property in the CSS:

Example 1: In this example we use border-block-width to set the width of block borders, contrasting with dashed inline borders, demonstrating its effect within a styled div element.

Output:

Example 2: In this example we use border-block-width to set a solid cyan border with a block width of 2px, within a purple background div.

Output:

Supported Browsers:

The browsers supported by border-block-width property are listed below:

• Google Chrome
• Edge
• Firefox
• Opera
• Safari