CSS border-block-color Property

Description

The border-block-color CSS property is used to specify the color of the borders that run along the inline and block axis of an element in a writing mode, such as text in a vertical writing mode or columns in a multi-column layout. It allows web developers to customize the color of these borders independently from the regular horizontal borders created by the border-color property. This property is particularly useful in complex layout scenarios where text and content flow in non-standard directions, allowing for precise control over the appearance of the element's borders in various writing modes.

Initial value
currentcolor
Applies to
all elements
Inherited
no
Computed value
computed color
Animatable
by computed value type
JavaScript syntax
object.style.borderBlockColor

Interactive Demo

Example of the Border
Block Color Property

Syntax

border-block-color: <color>

Values

  • <color>The color of the border.

Example

<div class="box">
This is a box with a border.
</div>
.box {
  border-block: 5px dashed;
  border-block-color: green;
  writing-mode: vertical-rl;
}

Browser Support

The following table will show you the current browser support for the CSS border-block-color property.

Desktop
Edge Chrome Firefox Opera Safari
8787667314.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
87666214.51487

Last updated by CSSPortal on: 1st January 2024