CSS 'border-block-start' Property Explained

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.

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