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

border-block-color: green;
writing-mode: horizontal-tb;

border-block-color: #E1341E;
writing-mode: vertical-rl;

border-block-color: rgb(106, 46, 203);
writing-mode: horizontal-tb;

border-block-color: hsl(197, 63%, 49%);
writing-mode: vertical-lr;

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
87	87	66	73	14.1

Tablets / Mobile
87	66	62	14.5	14	87

Last updated by CSSPortal on: 1st January 2024