CSS border-block-end Property
Description
The border-block-end
CSS property is a shorthand property used to set the border properties for the end side of a block-level element within a writing mode. In a horizontal-tb (top-to-bottom) writing mode, it corresponds to the right border, while in a vertical-rl (right-to-left) or vertical-lr (left-to-right) writing mode, it corresponds to the bottom border. This property allows for precise control over the border styling, color, width, and other related attributes on the specified block end, helping web developers create visually appealing and responsive layouts, especially in multilingual or bidirectional web content. Individual properties are: border-block-end-width, border-block-end-style, border-block-end-color.
- Initial value
- See individual properties
- Applies to
- all elements
- Inherited
- no
- Computed value
- See individual properties
- Animatable
- See individual properties
- JavaScript syntax
- object.style.borderBlockEnd
Interactive Demo
Block End Property
Syntax
border-block-end: <border-block-end-width> <border-block-end-style> <border-block-end-color>
Values
- <border-block-end-width>Specifies the width of the border
- <border-block-end-style>Specifies the styleof the border
- <border-block-end-color>Specifies the colorof the border
Example
<div class="box">
This is a box with a border.
</div>
.box {
border-block: 5px solid red;
border-block-end: 5px solid green;
writing-mode: vertical-rl;
}
Browser Support
The following table will show you the current browser support for the CSS border-block-end
property.
Desktop | |||||
79 | 69 | 41 | 56 | 12.1 |
Tablets / Mobile | |||||
69 | 41 | 48 | 12.2 | 10 | 69 |
Last updated by CSSPortal on: 1st January 2024