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;

.note {
  writing-mode: vertical-rl;           /* block-start is the right edge */
  border: 4px solid;
  border-block-start-style: dashed;    /* only the right border becomes dashed */
}

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 is the top border in horizontal writing modes (horizontal-tb, like English). In vertical writing modes the block-start edge depends on the mode: with writing-mode: vertical-rl (the usual mode for traditional Japanese, where lines run top to bottom and successive lines move right to left) block-start is the right border, and with writing-mode: vertical-lr block-start is the left border. 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. This is the initial value.
• Hidden: The border is not displayed, like none, but in tables using border-collapse: collapse it takes priority over conflicting borders from adjacent cells.
• 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 (none).
• Inherit: Inherits the 'border-block-start-style' from the element's parent.