CSS border-color (Set/Change Border Color)

The CSS border-color property is used when we need to color all the four borders of an element. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      h2 {border-style: solid; border-color: crimson;}
      p {border-style: solid; border-color: brown;}
   </style>
</head>
<body>

   <h2>The border-color Property</h2>
   <p>This is a para.</p>

</body>
</html>

Output

The border-color Property

This is a para.

CSS border-color Syntax

The syntax of border-color property in CSS, is:

border-color: x;

The value of x should be any of the following:

color - used to define the color using its name, RBG value, hexadecimal value or whatever the method you use to identify the color
transparent - used to define the transparent border
initial - used to set the default border
inherit - used to inherit and set the border from its parent

CSS border-color with Multiple Values

We can also define the multiple color for border-color property, to define different colors for different sides of the border.

border-color with Four Values

The first value refers to the top border
The second value refers to the right border
The third value refers to the bottom border
The fourth value refers to the left border

border-color with Three Values

The first value refers to the top border
The second value refers to the right and left border
The third value refers to the bottom border

border-color with Two Values

The first value refers to the top and bottom border
The second value refers to the right and left border

Example of border-color with Multiple Values

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      p#one {border-style: solid; border-width: 12px; padding: 12px;
            border-color: darkgoldenrod forestgreen blueviolet fuchsia;}
      p#two {border-style: solid; border-width: 12px; padding: 12px;
            border-color: darkgoldenrod forestgreen blueviolet;}
      p#three {border-style: solid; border-width: 12px; padding: 12px;
            border-color: darkgoldenrod forestgreen;}
      p#four {border-style: solid; border-width: 12px; padding: 12px;
            border-color: darkgoldenrod;}
   </style>
</head>
<body>

   <p id="one">This is a para (4 border color).</p>
   <p id="two">This is another para (3 border color).</p>
   <p id="three">This is the third para (two border color).</p>
   <p id="four">This is para four (one border color).</p>

</body>
</html>

Output

This is a para (4 border color).

This is another para (3 border color).

This is the third para (two border color).

This is para four (one border color).

CSS Online Test

« Previous Tutorial Next Tutorial »