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

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.

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.

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.

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.

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>

🔒

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