The CSS ‘border-block-end‘ property is a shorthand that allows you to set the width, style, and color of the border at the block-end of an element in a single declaration. This property is part of CSS Logical Properties and adapts to the writing mode of the document or element, making it especially useful in internationalized content where the direction of text may change.
CSS ‘border-block-end’ Property Examples
See the Pen CSS ‘border-block-end’ Property by Webzstore (@webzstore) on CodePen.
The ‘border-block-end‘ property enhances the flexibility and adaptability of CSS for internationalization by providing logical, writing-mode-aware control over element borders, supporting the creation of more accessible and globally friendly web designs.
Browser Support For ‘border-block-end’ Property
 |  |  |  |  |
| 41.0 | 12.1 | 69.0 | 79.0 | 56.0 |
CSS Syntax of the ‘border-block-end’ Property
border-block-end: width style color | initial | inherit;
Usage of the ‘border-block-end’ Property
Use ‘border-block-end‘ to style the border that appears at the end of an element’s block flow. This border is the bottom border in horizontal writing modes like English and the right border in vertical writing modes like traditional Japanese. It’s particularly handy for creating consistent designs across different languages and writing systems, ensuring that the border styling is logical and adapts to the flow of content.
Property Values of the ‘border-block-end’ 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 border style (solid, dotted, dashed, double, groove, ridge, inset, outset).
- Color: Sets the color of the border. It can be any valid CSS color value, like a named color, HEX, RGB, RGBA, HSL, or HSLA.
- Initial: Resets the ‘border-block-end‘ to its default value, effectively removing any custom styling.
- Inherit: Inherits the ‘border-block-end‘ settings from the parent element.
Leave a Reply