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.
Leave a Reply