CSS border-bottom-color Property

The border-bottom-color property in CSS is used to define the color of the bottom border of an element. It controls the visual appearance of the bottom border by applying a specific color.

It accepts color values like red, #ff0000, rgb(), hsl(), or transparent.
The color is visible only when a border style is applied (e.g., solid, dashed).
It is commonly used with border-bottom-style and border-bottom-width for complete border styling.

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

<!--Driver Code Starts-->

<!DOCTYPE html>
<html>
<head>
    <title>
        CSS | border-bottom-color Property
    </title>
<!--Driver Code Ends-->

    <style>
        h1 {
            border-bottom-style: solid;
            border-bottom-color: green;
        }
        
        div {
            border-style: solid;
            border-bottom-color: green;
        }
    </style>

<!--Driver Code Starts-->
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <div>I am a div with green bottom border. </div> 
</body>
</html>                    

<!--Driver Code Ends-->

CSS border-bottom-color Property

Explore