Webzstore
The CSS 'border-block-start' property is a shorthand for setting the width, style, and color of the border at an element's block start. Adapted to the document's writing mode, it specifies the border that appears at the beginning of the block flow (typically the top border in horizontal writing modes, like English, and the left border in vertical writing modes, like traditional Mongolian).
CSS 'border-block-start' Property Examples
See the Pen CSS 'border-block-start' Property by Webzstore (@webzstore) on CodePen.
The 'border-block-start' property enhances the CSS toolbox for creating adaptable, internationally friendly designs by providing control over border styles in a logical, flow-relative manner, supporting the creation of content that's accessible and visually consistent across different writing modes and directions.
Browser Support For 'border-block-start' Property
 |  |  |  |  |
| 41.0 | 12.1 | 69.0 | 79.0 | 56.0 |
CSS Syntax of the 'border-block-start' Property
border-block-start: width style color | initial | inherit ;
Usage of the 'border-block-start' Property
Use 'border-block-start' to style the border at the starting edge of the block flow direction of an element. This property is crucial in designs that need to accommodate multiple languages and writing systems, ensuring that the border styling is logical and consistent with the direction of content flow. It's especially useful for responsive designs and content that requires internationalization, adapting to changes in writing mode without the need for different style rules.
Property Values of the 'border-block-start' Property
- Width: Specifies the thickness of the border. It can be given in pixels (px), ems (em), or keywords (thin, medium, thick).
- Style: Determines the style of the border (solid, dotted, dashed, double, among others).
- Color: Sets the color of the border. It can be any valid CSS color value, like named colors, HEX, RGB, RGBA, HSL, or HSLA.
- Initial: Resets the 'border-block-start' to its default value, effectively removing any custom styling.
- Inherit: Inherits the 'border-block-start' settings from the parent element.
