Webzstore
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
/* width, style and color can be given in any order; each is optional */
border-block-end: <line-width> || <line-style> || <color>;
border-block-end: 3px solid navy; /* horizontal-tb: bottom border */
border-block-end: dashed; /* omitted width and color use medium and currentcolor */
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 (horizontal-tb, like English). In vertical writing modes it depends on the mode: with writing-mode: vertical-rl (the usual mode for traditional Japanese, where successive lines move right to left) block-end is the left border, and with writing-mode: vertical-lr block-end is the right border. 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). The default is medium.
- Style: Determines the border style (none, hidden, solid, dotted, dashed, double, groove, ridge, inset, outset). The default is none, which draws no border.
- 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. The default is currentcolor (the element's text color).
- Initial: Resets the 'border-block-end' to its default values (medium, none, currentcolor), which means no border is drawn.
- Inherit: Inherits the 'border-block-end' settings from the parent element.
