CSS border-block-start-color Property

Description

The border-block-start-color CSS property is used to specify the color of the border on the block-start side of an element in a block-axis writing mode. In writing modes such as vertical-rl (right-to-left vertical) or vertical-lr (left-to-right vertical), which involve text flowing vertically, the block-start side is the top edge in the horizontal writing mode. By setting the border-block-start-color, you can control the color of the border on this particular edge, allowing for customized styling of the element's appearance in different writing modes. This property is particularly useful for creating visually appealing layouts and designs, especially when working with non-standard text directions or orientations.

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

Interactive Demo

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

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

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

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

Example of the Border
Block Start Color Property

Syntax

border-block-start-color: <color>

Values

<color>The color of the border.

Example

HTML

<div class="box">

  This is a box with a border.

</div>

CSS

.box {
  border-block: 5px dashed;
  border-block-color: green;
  border-block-start: 5px solid;
  border-block-start-color: red;
  writing-mode: vertical-rl;
}

Result

Editor