CSS border-bottom-color (Set/Change Color of Bottom Border)

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

HTML with CSS Code

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

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

</body>
</html>

Output

The border-bottom-color Property

This is para one.

Important - Since to change the color of a border, there must be a border to be exist. Therefore, be sure to declare the border using either border-style or border-bottom-style property, before using border-bottom-color to change the color of bottom border.

CSS border-bottom-color Syntax

The syntax of border-bottom-color property is:

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

That is, we can set required color like red, yellow, #ccc, rgb(1, 30, 4) etc. or can use the keyword like transparent, initial, or inherit.

Note - To set the transparent border, use transparent. To set the default bottom border color, use initial. And to inherit the color of parent element, use inherit.

CSS Online Test

« Previous Tutorial Next Tutorial »