CSS border-block-color Property

Definition and Usage

The border-block-color property sets the color of an element’s logical block-start and block-end borders. In the default horizontal writing mode, that means the top and bottom border colors.

One color paints both sides. Two colors set start first and end second. It maps to physical sides based on writing-mode. For the other axis, use border-inline-color.

CSS Syntax

The initial value is currentColor. You still need a visible border-block-style and width for the color to show.

Property Values

How to Use border-block-color

Give the block borders a style and width first, then set their color.

1. Set a visible block border, for example border-block: 4px solid; or separate width and style.
2. Add border-block-color with one color for both sides, or two colors for start and end.
3. Leave the inline sides alone, or color them with border-inline-color.
4. Remember: without a style other than none, the color will not show.

Live Preview

The box already has a solid 4px block border. Change only border-block-color.

CSS Examples

Each snippet focuses on border-block-color. Style and width are only there so the color can show. Use Try It Yourself for a live editor.

<style>
  div {
    border-block: 4px solid;
    border-block-color: #2563eb;
    padding: 12px;
  }
</style>

<div>Same color on both block sides</div>

<style>
  div {
    border-block: 4px solid;
    border-block-color: #2563eb #0f766e;
    padding: 12px;
  }
</style>

<div>Blue start, teal end</div>

<style>
  div {
    color: #7c3aed;
    border-block: 4px solid;
    border-block-color: currentColor;
    padding: 12px;
  }
</style>

<div>Border matches text color</div>

Key Takeaways