border-block-start-color

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨January 2020⁩.

Theborder-block-start-colorCSS property defines the color of the logical block-start border of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. It corresponds to theborder-top-color,border-right-color,border-bottom-color, orborder-left-color property depending on the values defined forwriting-mode,direction, andtext-orientation.

Try it

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

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

border-block-start-color: rgb(170 50 220 / 0.6);writing-mode: horizontal-tb;

border-block-start-color: hsl(60 90% 50% / 0.8);writing-mode: vertical-lr;

<section>  <div>    This is a box with a border around it.  </div></section>

#example-element {  background-color: #eeeeee;  color: black;  border: 0.75em solid;  padding: 0.75em;  width: 80%;  height: 100px;  unicode-bidi: bidi-override;}

Syntax

css

border-block-start-color: blue;border-block-start-color: #4c5d21;/* Global values */border-block-start-color: inherit;border-block-start-color: initial;border-block-start-color: revert;border-block-start-color: revert-layer;border-block-start-color: unset;

Related properties areborder-block-end-color,border-inline-start-color, andborder-inline-end-color, which define the other border colors of the element.

Values

<color>: The color of the border.

Formal definition

Initial value	`currentcolor`
Applies to	all elements
Inherited	no
Computed value	computed color
Animation type	by computed value type

Formal syntax

border-block-start-color =
<color>|
<image-1D>

<image-1D> =
<stripes()>

<stripes()> =
stripes(<color-stripe>#)

<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?

<length-percentage> =
<length>|
<percentage>

Examples

Border color with vertical text

HTML

html

<div>  <p>Example text</p></div>

CSS

css

div {  background-color: yellow;  width: 120px;  height: 120px;}.exampleText {  writing-mode: vertical-lr;  border: 10px solid blue;  border-block-start-color: red;}

Results

Specifications

Specification
CSS Logical Properties and Values Level 1 # border-color

Browser compatibility

Help improve MDN

Learn how to contribute

This page was last modified on⁨Oct 30, 2025⁩ byMDN contributors.

View this page on GitHub •Report a problem with this content

Movatterモバイル変換