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

The CSS 'border-block-start-style' property specifies the style of the border at an element's block start. This logical property is particularly useful for adapting designs to various writing modes, ensuring that border styles are applied in a manner consistent with the direction of text flow. It allows designers to define how the starting edge of an element's block flow is visually delineated.

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

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

The 'border-block-start-style' property enhances CSS's capabilities for creating adaptable, internationally friendly designs by providing control over border styles in a logical, flow-relative manner. This supports the creation of content that's accessible and visually consistent across different writing modes and directions.

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

41.0	12.1	69.0	79.0	56.0

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

border-block-start-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;

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

Use 'border-block-start-style' to set the border style at the beginning of the block flow direction of an element, which can be the top border in horizontal writing modes (like English) and might be the left border in vertical writing modes (like traditional Japanese). This property is crucial in creating responsive designs that need to accommodate internationalization, ensuring that the appearance of borders automatically adjusts to the orientation of the content.

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

• None: No border is displayed, regardless of any border width value.
• Hidden: The border is not displayed, effectively making it invisible. This can also affect table borders.
• Dotted: The border is a series of dots.
• Dashed: The border consists of short line segments or dashes.
• Solid: The border is a single, solid line.
• Double: The border comprises two solid lines with a space between them.
• Groove: The border appears to be carved into the surface, creating a grooved effect.
• Ridge: The border looks like it protrudes from the surface, giving a ridged effect.
• Inset: The border makes the element appear as if it is embedded in the page.
• Outset: The border gives the impression that the element stands out from the page.
• Initial: Resets the 'border-block-start-style' to its default value.
• Inherit: Inherits the 'border-block-start-style' from the element's parent.

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