CSS border-color Property

Definition and Usage

The border-color property is a shorthand for the four side colors: border-top-color, border-right-color, border-bottom-color, and border-left-color.

Use one color for every side, or up to four colors in clockwise order: top, right, bottom, left. It applies to all elements, including ::first-letter, and it is not inherited. Each side defaults to currentColor (the element’s color). Color alone does not paint a border until border-style is visible.

CSS Syntax

One value sets all sides. Two set top/bottom then left/right. Three set top, left/right, bottom. Four set top, right, bottom, left.

Property Values

How to Use border-color

Give the border a visible style and width, then set the color shorthand.

1. Choose the element that needs a border.
2. Set border-style (for example solid) and a width greater than zero.
3. Set border-color with one to four colors.
4. Or use the border shorthand to set width, style, and color together.

Live Preview

The box already has a solid 4px border. Change only border-color and watch the sides update.

CSS Examples

Each snippet keeps CSS lean: a visible border, then border-color. Use Try It Yourself for a live editor.

<style>
  p {
    border: 4px solid;
    border-color: red;
  }
</style>

<p>Red border on all sides</p>

<style>
  p {
    border: 4px solid;
    border-color: red #2563eb #0f766e gold;
  }
</style>

<p>Top, right, bottom, left</p>

<style>
  p {
    color: #2563eb;
    border: 4px solid;
    border-color: currentColor;
  }
</style>

<p>Border matches text color</p>

Key Takeaways