CSS border-block-start-color Property

What You’ll Learn

The border-block-start-color property sets the color of the block-start border on an element. In horizontal writing, that usually means the top border color.

Definition and Usage

The border-block-start-color CSS property allows you to specify the color of the border on the block-start side of an element. The block-start side corresponds to the top edge in a left-to-right, top-to-bottom writing mode, but it can vary depending on the writing mode of the document.

This property is useful for creating layouts that respect the document’s writing direction and is part of CSS logical properties for modern, multilingual web design.

📝 Syntax

The syntax for border-block-start-color is simple. It can be applied to any element that has borders, and the color can be specified using any valid CSS color value.

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

Basic Example

.box {
  border-block-start-style: solid;
  border-block-start-width: 2px;
  border-block-start-color: green;
}

The color value can be a named color, hexadecimal value, RGB, HSL, or any other valid CSS color.

Syntax Rules

• This property affects only the block-start border color.
• It does not set width or style by itself.
• Use with border-block-start-width and border-block-start-style for full control.
• Alternatively, use border-block-start: 2px solid green; as shorthand.
• The color follows writing mode and stays on the logical block-start edge.

Default Value

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

💎 Property Values

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

Works With Other Longhands

Block-Start Color and Writing Modes

The block-start edge follows the block axis, so the same color rule adapts when writing mode changes.

border-block-start-color vs border-top-color

Examples Gallery

Try border-block-start-color with green borders, hex values, currentColor, and vertical writing mode.

<style>
  .box {
    border-block-start-style: solid;
    border-block-start-width: 2px;
    border-block-start-color: green;
    padding-block-start: 0.75rem;
  }
</style>

<div class="box">
  This box has a green block-start border. In English, this is the top edge.
</div>

.header-rule {
  border-block-start: 3px solid #2563eb;
  border-block-start-color: #2563eb;
  padding-block-start: 1rem;
}

.quote {
  color: #059669;
  border-block-start-style: solid;
  border-block-start-width: 2px;
  border-block-start-color: currentColor;
}

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

💡 Best Practices