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 »

Follow/Like Us on Facebook




Subscribe Us on YouTube