CSS Border Color

Border color paints the line itself — any CSS color value works, and if you never set one, the border quietly falls back to the element's own text color.

In this page:

Setting border-color
The currentColor Default
Per-Side Colors
Transparent Borders
Border Color With Opacity

Syntax

css

selector {
  border-color: color;
}

Setting border-color

border-color accepts any valid CSS color: named keywords, hex, rgb()/rgba(), or hsl()/hsla(). It can take one value for all sides or up to four values for top/right/bottom/left in that order, matching the same shorthand pattern as margin and padding.

Note:

Accepted values:
named color — red, navy, and so on
#rrggbb — hex code
rgb() / hsl() — functional colors, with optional alpha
transparent — invisible border that still takes space
currentcolor — matches the text color (default)
Up to four values set top, right, bottom, left
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Setting border-color

css

<style>
.box {
  border-style: solid;
  border-width: 3px;
  border-color: crimson;
}
</style>
<div class="box">One color for all sides</div>

The currentColor Default

If border-style and border-width are set but border-color is omitted, the border uses currentColor — the element's own computed text color — rather than defaulting to black. This means changing an element's color property can silently change its border color too.

Note:

Accepted values:
named color — e.g. crimson
#rrggbb / rgb() / hsl() — exact colors
rgba() / hsla() — semi-transparent border
transparent — invisible border that still takes space
currentcolor — the element's text color (initial value)
one to four values — top, right, bottom, left order
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: The currentColor Default

css

<style>
.box {
  color: purple;
  border-style: solid;
  border-width: 3px;
}
</style>
<div class="box">Border matches the text color automatically</div>

Per-Side Colors

border-top-color, border-right-color, border-bottom-color, and border-left-color let each side use a completely different color, useful for effects like a two-tone card border or a color-coded status indicator.

Note:

Accepted values:
one value — all four sides
two values — top/bottom then left/right
three values — top, left/right, bottom
four values — top, right, bottom, left
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Per-Side Colors

css

<style>
.box {
  border-style: solid;
  border-width: 3px;
  border-top-color: red;
  border-right-color: green;
  border-bottom-color: blue;
  border-left-color: orange;
}
</style>
<div class="box">Four different colors, one per side</div>

Transparent Borders

border-color: transparent keeps the border's width reserved as invisible space without drawing any visible line — a common trick for reserving layout space that only becomes visible (e.g. on :hover) without the element shifting position.

Note:

Accepted values:
named color — e.g. crimson
#rrggbb / rgb() / hsl() — exact colors
rgba() / hsla() — semi-transparent border
transparent — invisible border that still takes space
currentcolor — the element's text color (initial value)
one to four values — top, right, bottom, left order
inherit | initial | unset | revert — CSS-wide keywords accepted by every property

Example: Transparent Borders

css

<style>
.btn {
  border: 3px solid transparent;
}
.btn:hover {
  border-color: blue;
}
</style>
<button class="btn">Space reserved, only visible on hover</button>

Border Color With Opacity

Using rgba() or hsla() for border-color lets the border blend partially with whatever is behind the element, unlike a fully opaque named color or hex value.

Example: Border Color With Opacity

css

<style>
.box {
  border: 4px solid rgba(0, 0, 255, 0.4);
}
</style>
<div class="box">Border blends with whatever is behind it</div>

Live Example

Chapter Quiz — Complete all 21 topics to unlock

0/21 topics done

Complete these topics first:

← Previous Lesson CSS Border Width Next Lesson → CSS Border Sides

CSS Border Color

Setting border-color

The currentColor Default

Per-Side Colors

Transparent Borders

Border Color With Opacity

Chapter Quiz — Complete all 21 topics to unlock

Login to run this code