CSS border-block-end Property

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

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

Example of the Border
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
Edge Chrome Firefox Opera Safari
7969415612.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
69414812.21069

Last updated by CSSPortal on: 1st January 2024