CODESCRACKER

CSS border-bottom-color: Set or Change the Color of the Bottom Border

The CSS border-bottom-color property is used when we need to change the color of the 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.

The first style rule applies to all h2 elements and sets the border-bottom-style and border-bottom-color properties. It specifies the border-bottom-style as "solid" and the border-bottom-color as "darkgoldenrod". This will result in a solid line at the bottom of the h2 element that is colored in a dark goldenrod shade.

The second style rule affects all p elements by setting the border-style and border-bottom-color properties. It specifies "solid" as the border-style and "crimson" as the border-bottom-color. This will result in a solid border surrounding the entire p element, with the bottom border colored in crimson.

When this code is rendered in a web browser, the heading will have a solid line at the bottom that is a dark goldenrod color, and the paragraph will have a solid border with a crimson bottom border.

It's worth noting that the border-bottom-color property only affects the color of the bottom border, whereas the border-color property affects the color of an element's four borders. Because the border-color property is not set in this code, the color of the p element's left, right, and top borders will be the default color (black).

Important: To change the color of a border, there must be a border. Therefore, be sure to declare the border using either the border-style or border-bottom-style properties before using border-bottom-color to change the color of the bottom border.

CSS border-bottom-color syntax

The syntax of the 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 use keywords 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 the parent element, use inherit.

CSS Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!