CSS border-top-color Property

What You’ll Learn

The border-top-color property sets the color of the border on the physical top side only.

Definition and Usage

The border-top-color CSS property sets the color of the border on the physical top side of an element. It is a longhand of border-top and works alongside border-top-width and border-top-style.

Unlike logical properties such as border-block-start-color, border-top-color always targets the physical top edge — even in vertical writing modes. That makes it straightforward for section headers, card accent bars, and horizontal dividers.

📝 Syntax

border-top-color accepts any valid CSS color value:

selector {
  border-top-color: color;
}

Basic Example

div {
  border: 2px solid;
  border-top-color: red;
}

Syntax Rules

• Accepts named colors, hex, rgb, hsl, currentcolor, and transparent.
• Only affects the top border side; other sides keep their own colors.
• You need a visible border width and style for the color to appear.
• Always affects the physical top side, regardless of direction or writing-mode.
• Default is currentcolor, matching the element’s text color.

Default Value

The default value of border-top-color is currentcolor. The top border uses the element’s text color unless you set a different color explicitly.

💎 Property Values

Common Value Types

Top Border Color and Writing Modes

border-top-color always colors the physical top edge. Vertical writing modes do not move the border — compare with border-block-start-color when block-start should follow the writing mode.

border-top-color vs related properties

Examples Gallery

Try border-top-color with named colors, hex values, currentcolor, and vertical writing.

<style>
  div {
    border: 2px solid;
    border-top-color: red;
    padding: 10px;
  }
</style>

<div>
  This div has a red top border.
</div>

.card {
  border: 3px solid #cbd5e1;
  border-top-color: #2563eb;
  padding: 1rem;
  background: #eff6ff;
}

.quote {
  color: #7c3aed;
  border: 3px solid #cbd5e1;
  border-top-color: currentcolor;
  padding: 0.75rem 1rem;
}

<style>
  .vertical-box {
    writing-mode: vertical-rl;
    display: inline-block;
    border: 3px solid #cbd5e1;
    border-top-color: #059669;
    padding: 0.75rem 1rem;
    background: #ecfdf5;
  }
</style>

<div class="vertical-box">
  Top border color stays on the physical top
</div>

💡 Best Practices