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:

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

border-color with Three Values

border-color with Two Values

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 »


Liked this post? Share it!