CSS border-color Property

What You’ll Learn

The border-color property sets the color of an element’s borders. Use one color for all sides or up to four values to color top, right, bottom, and left separately.

Definition and Usage

The border-color CSS property controls the color of an element’s border lines. It works on any element that has a visible border style and width. You can apply a uniform color across all four sides or assign different colors to each side for more expressive layouts.

Customizing border color helps elements stand out, match your brand palette, or create subtle separation between sections. It is often used together with border-width and border-style, or through the convenient border shorthand.

📝 Syntax

The border-color property accepts one to four color values:

/* one color for all sides */
selector {
  border-color: color;
}

/* top | right | bottom | left */
selector {
  border-color: top right bottom left;
}

Basic Example

.box {
  border: 2px solid red;
  padding: 10px;
}

Syntax Rules

• One value applies the same color to all four sides.
• Two values set vertical sides first, then horizontal sides.
• Three values set top, horizontal sides, then bottom.
• Four values follow top, right, bottom, left order (clockwise).
• Any valid CSS color is allowed, including currentColor and transparent.

Default Value

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

💎 Property Values

border-color accepts any standard CSS color value.

Multi-Value Syntax

One Color vs Different Side Colors

Use a single value when every side should match. Use four values when each physical side needs its own color.

border-color vs related properties

Examples Gallery

Try border-color with a uniform red border, four side colors, hex values, and currentColor.

<style>
  .box {
    border: 2px solid red;
    padding: 10px;
  }
</style>

<div class="box">
  This box has a red border.
</div>

<style>
  .box {
    border-width: 2px;
    border-style: solid;
    border-color: red green blue yellow;
    padding: 10px;
  }
</style>

<div class="box">
  This box has different colors for each border.
</div>

.card {
  border-width: 3px;
  border-style: solid;
  border-color: #2563eb;
  padding: 1rem;
  border-radius: 0.5rem;
}

.note {
  color: #059669;
  border-width: 2px;
  border-style: solid;
  border-color: currentColor;
  padding: 0.75rem;
}

💡 Best Practices