CSS border-block-end-color 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!

☕ Buy a Coffee

Description

The border-block-end-color CSS property is used to specify the color of the border on the "end" side of an element in a block flow context, which typically represents the bottom border in a horizontal writing mode (like English) or the right border in a vertical writing mode (such as Japanese or Chinese). This property allows web developers to precisely control the color of this specific border edge, adding visual styling to elements and improving the overall design of a webpage. It's particularly useful when dealing with complex layouts or multilingual content where the writing mode may change, ensuring consistent and aesthetically pleasing borders.

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

Interactive Demo

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

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

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

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

Example of the Border
Block End Color Property

Syntax

border-block-end-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-end: 5px solid;
  border-block-end-color: red;
  writing-mode: vertical-rl;
}

Result

Editor