CSS border-top-color Property

Definition and Usage

The border-top-color property sets the color of an element’s physical top border. It does not set width or style. You can also set this color with border-top or border-color.

The initial value is currentColor, so the top border matches the element’s text color until you override it. A visible border-top-style and non-zero border-top-width are still required for the color to show.

CSS Syntax

Accepts any CSS color: named colors, hex, rgb(), hsl(), currentColor, or transparent.

Property Values

How to Use border-top-color

Make sure a top border exists, then paint only its color.

1. Give the element a top border with a visible style and width (or use border-top).
2. Set border-top-color to any CSS color.
3. Leave other sides alone — this property never colors right, bottom, or left.
4. Prefer the longhand when width and style are already set and you only need to change the color.

Live Preview

Width and style stay fixed. Change only border-top-color and watch the top edge repaint.

CSS Examples

Each snippet focuses on border-top-color. Use Try It Yourself for a live editor.

<style>
  div {
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: #2563eb;
    padding: 12px;
  }
</style>

<div>Blue top border</div>

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

<div>Matches text color</div>

<style>
  div {
    border-top-width: 3px;
    border-top-style: solid;
    border-top-color: transparent;
    padding: 12px;
    background: #f1f5f9;
  }
</style>

<div>Invisible top stroke</div>

Key Takeaways