Webzstore
The CSS 'border-block-end-style' property specifies the border style at the block-end of an element. This property is part of the CSS Logical Properties, designed to adapt border styling to the content layout and flow based on the writing mode. It allows for the setting of border styles that can dynamically adjust in internationalized contexts, where the direction of text and layout may vary.
CSS 'border-block-end-style' Property Examples
See the Pen CSS 'border-block-end-style' Property by Webzstore (@webzstore) on CodePen.
The 'border-block-end-style' property enhances CSS's capabilities for creating adaptable, internationally friendly designs by providing control over border styles in a logical, flow-relative manner.
Browser Support For 'border-block-end-style' Property
 |  |  |  |  |
| 41.0 | 12.1 | 69.0 | 79.0 | 56.0 |
CSS Syntax of the 'border-block-end-style' Property
border-block-end-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | initial | inherit;
Usage of the 'border-block-end-style' Property
Use 'border-block-end-style' to define how the border looks at the end of an element's block flow. In horizontal-tb writing modes (like English), it is typically the bottom border, but it can also be the right border in vertical writing modes. This property is crucial for designs that need to be responsive and adaptable across different languages and writing systems, ensuring the border's appearance is logical and consistent with the flow of content.
Property Values of the 'border-block-end-style' Property
- None: No border is drawn, regardless of any border width.
- Hidden: The border is hidden, which can also affect table borders.
- Dotted: The border is a series of dots.
- Dashed: The border is a series of short line segments.
- Solid: The border is a single, solid line.
- Double: The border is two solid lines with some space between them.
- Groove: The border appears to be carved into the surface.
- Ridge: The border appears to protrude from the surface.
- Inset: The border makes the box appear embedded.
- Outset: The border makes the box appear to stand out.
- Initial: Resets the 'border-block-end-style' to its default value (none).
- Inherit: Inherits the 'border-block-end-style' from the element's parent.
