CSS border-bottom-color Property

The CSS border-bottom-color property is used to set the color of the bottom border of an element. It is mandatory to declare the border-style or border-bottom-style property before using the border-bottom-color property always as there must exist a border first before we change its color.

The current value of the element is the default color of this property. CSS border-bottom-property is animatable but cannot be inherited.

Syntax:

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

Default Value : It s default value is initial.

Property Values: The border-bottom-color property values are listed below:

color: It specifies the color of the bottom border.
transparent: It specifies that the border color should be transparent.
initial: It is used to set its default value.
inherit: It is used when an element inherits this property from its parent element.

Example:

html

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-bottom-color Property
    </title>
    <style>
        h1 {
            border-bottom-style: solid;
            border-bottom-color: green;
        }
          
        div {
            border-style: solid;
            border-bottom-color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
    <div>I am a div with green bottom border. </div> 
</body>
</html>                    