CSS border-block-color Property

What You’ll Learn

The border-block-color property sets the color of logical block borders on an element. In horizontal writing, that usually means the top and bottom border colors.

Definition and Usage

The border-block-color CSS property sets the color of the logical block borders of an element. Logical block borders refer to the block-start and block-end sides, which are typically the top and bottom borders in horizontal writing modes.

This property is especially useful in writing modes where text flow can change, such as vertical or right-to-left layouts. It lets you color block-axis borders without hard-coding top and bottom.

📝 Syntax

The syntax for border-block-color accepts one or two color values:

selector {
  border-block-color: <color>;
}

Basic Example

.block {
  border-style: solid;
  border-width: 4px;
  border-block-color: blue green;
}

Syntax Rules

• Single color value — Applies the same color to both block-start and block-end.
• Two color values — The first sets block-start; the second sets block-end.
• In horizontal writing, block-start is usually top and block-end is usually bottom.
• Use with a visible border-style and non-zero border-width.
• Related properties include border-block-width, border-block-style, and border-block.

Default Value

The default value of border-block-color is currentColor. That means the block border color inherits the element’s text color value unless you override it.

💎 Property Values

border-block-color accepts any valid CSS color value.

Block Border Colors and Writing Modes

Logical block border colors follow the block axis, so they stay correct when writing mode changes.

border-block-color vs border-color

Examples Gallery

Try border-block-color with split colors, a single color, hex values, and vertical writing mode.

<style>
  .block {
    border-style: solid;
    border-width: 4px;
    border-block-color: blue green;
    padding: 1rem;
  }
</style>

<div class="block">
  This block has a blue top border and a green bottom border.
</div>

.card {
  border-block: 2px solid #2563eb;
  border-block-color: #2563eb;
  padding: 1rem;
}

.highlight {
  border-style: solid;
  border-width: 3px 0;
  border-block-color: #ff5733;
  padding-block: 1rem;
}

.vertical-panel {
  writing-mode: vertical-rl;
  border-style: solid;
  border-width: 3px;
  border-block-color: #7c3aed #ea580c;
  padding: 1rem;
}

💡 Best Practices