CSS border-block-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The CSS property border-block-color is used to define the color of an element's logical block-start and block-end borders. In other words, it controls the color of the borders that appear along the start and end edges of the block dimension, which is determined by the element’s writing mode. For languages that flow top-to-bottom, left-to-right (like English), the block dimension corresponds to the vertical direction. This property provides a way to style borders in a logical, writing-mode-aware manner, rather than being limited to the physical directions of border-top and border-bottom.

Using border-block-color can be particularly advantageous when designing websites that need to support multiple writing modes or languages. For instance, in vertical writing modes common in East Asian texts, the block-start and block-end borders may correspond to the left and right edges of a box rather than the top and bottom. This allows developers to maintain consistent styling across different scripts without manually adjusting the physical border properties. Additionally, border-block-color can be used in combination with other logical border properties, such as border-inline-color, to create fully flexible and adaptable layouts that respond naturally to changes in writing direction.

It’s also worth noting that border-block-color interacts seamlessly with shorthand border properties and other individual border-color properties, such as border-top-color or border-bottom-color. When a logical property like border-block-color is set, it can override the corresponding physical borders depending on the writing mode. This makes it a powerful tool for modern, internationalized web design, allowing developers to write cleaner, more maintainable CSS while supporting diverse layouts and ensuring that visual borders remain consistent and semantically correct.

Definition

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;

Example of the Border
Block Color Property

Syntax

border-block-color: <color>

Values

<color>The color of the border.

Example

HTML

<div class='container'>

  <div class='box single'>

    <strong>Single color</strong>

    <p>border-block-color: crimson;</p>

  </div>

  <div class='box dual'>

    <strong>Two colors</strong>

    <p>border-block-color: midnightblue gold;</p>

  </div>

</div>

CSS

/* Example demonstrating border-block-color */
:root {
  --bg: #f7f7fb;
  --panel: #ffffff;
}

body {
  margin: 0;
  padding: 2rem;
  background: var(--bg);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: #111;
}

.container {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.box {
  background: var(--panel);
  padding: 1rem 1.25rem;
  border-block-width: 6px;        /* thickness of top and bottom borders (logical) */
  border-block-style: solid;      /* style for block-start and block-end borders */
  border-inline-width: 1px;       /* thin left/right borders for contrast */
  border-inline-style: dashed;
  border-inline-color: #ddd;
  border-radius: 8px;
  min-width: 220px;
}

/* single color applied to both block-start (top) and block-end (bottom) */
.single {
  border-block-color: crimson;
}

/* two colors: first for block-start (top), second for block-end (bottom) */
.dual {
  border-block-color: midnightblue gold;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-block-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.