CSS border-block-start-color Property

Definition and Usage

The border-block-start-color property sets the color of the logical block-start border. It does not set width or style. In the default horizontal writing mode, block-start is usually the top edge, so it acts like border-top-color.

The physical edge depends on writing-mode, direction, and text-orientation. It applies to all elements and is not inherited. The initial value is currentcolor.

CSS Syntax

Any valid CSS color works. You still need a visible border-block-start-style and width for the color to show.

Property Values

How to Use border-block-start-color

Give the block-start edge a style and width first, then set its color.

1. Set a visible style, for example border-block-start-style: solid;
2. Set a positive width, for example border-block-start-width: 4px;
3. Add border-block-start-color with any valid color.
4. Or use the border-block-start shorthand to set all three together.

Live Preview

Style and width stay fixed at 4px solid. Only border-block-start-color changes.

CSS Examples

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

<style>
  p {
    border-block-start-style: solid;
    border-block-start-width: 4px;
    border-block-start-color: blue;
  }
</style>

<p>Block start</p>

<style>
  p {
    color: #7c3aed;
    border-block-start-style: solid;
    border-block-start-width: 4px;
    border-block-start-color: currentcolor;
  }
</style>

<p>Block start</p>

<style>
  p {
    writing-mode: vertical-rl;
    border-block-start-style: solid;
    border-block-start-width: 8px;
    border-block-start-color: blue;
  }
</style>

<p>Block start</p>

Key Takeaways