CSS border-color Property Explained with Examples

Border Color

The border-color property in CSS allows you to define the color of the borders of an HTML element. It can be used to set the same color for all four sides or apply different colors to each side individually.

Note: A border-style must be declared for the border color to be visible. Without it, the border would not render even if the color is set.

Syntax:

selector {
  border-style: value;
  border-color: value;
}

You can set:

One value for all four sides

Two values: top/bottom and left/right

Three values: top, left/right, bottom

Four values: top, right, bottom, left

Ways to Set Border Color in CSS

Method	Syntax Example	Output
Named Color	border-color: red;	Red
Hex Code	border-color: #FF0000	Red
RGB	border-color: rgb(255, 0, 0);	Red
RGBA (Transparent)	border-color: rgba(255, 0, 0, 0.5);	Semi-transparent Red
HSL	border-color: hsl(0, 100%, 50%);	Red
HSLA	border-color: hsla(0, 100%, 50%, 0.5);	Semi-transparent Red

Example: Different Border Colors

<!DOCTYPE html>
<html>
<body>
  <h2>border-color with different values</h2>

  <p style="border-style: double; border-color: red;">
    Red Color Border
  </p>

  <p style="border-style: dashed; border-color: #40a944;">
    Green Color Border
  </p>

  <p style="border-style: solid; border-color: rgb(255,200,0);">
    Yellow Color Border
  </p>

  <p style="border-style: dotted; border-color: hsl(0, 50%, 50%)">
    Brown Color Border
  </p>

  <p style="border-style: solid; border-color: red blue green yellow">
    Mixed Color Borders (Top, Right, Bottom, Left)
  </p>

</body>
</html>

Output:

Key Point

Always define border-style before border-color.

You can style all sides or individual sides using 1–4 values.

Supports multiple formats: named colors, hex, RGB, RGBA, HSL, HSLA.

Useful for adding visual emphasis and separating elements.