CSS border-color Property

CSS border-color property is used to specify the color of all four sides of border in a single declaration.

The color value can be specified in any valid color format like ‘color name’, ‘HEX’, ‘RGB’, ‘HSL’, etc.

This paragraph has different color of border each side.

In the example below, the <p> element has a tomato color border on each side. Try it out to see how it works:

Example:

p{
  border-color: tomato;
}

We can also set the border color for each side individually using the following rules:

If the border-color property has four values:

• border-color: red green blue orange;
  • the top border will be of red color
  • the right border will be of green color
  • the bottom border will be of blue color
  • the left border will be of orange color

If the border-color property has three values:

• border-color: red green blue;
  • the top border will be of red color
  • left and right borders will be of green color
  • the bottom border will be of blue color

If the border-color property has two values:

• border-color: red green;
  • top and bottom borders will be of red color
  • left and right borders will be of green color

If the border-color property has only one value:

• border-color: red;
  • All four sides borders will be of the same red color

Example:

p.four{
  border-color: red green blue orange;
}
p.three{
  border-color: red green blue;
}
p.two{
  border-color: red green;
}
p.one{
  border-color: red;
}

Note: An element must have a border before applying the border-color property to it. Otherwise, the border-color property has no effect on the element.

CSS Syntax

The border-color property has the following syntax:

border-color: color|transparent|initial|inherit;

Property Values

The border-color property accepts the following values:

General Info

Related Pages

CSS Tutorial: CSS Borders