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>
|
Output:
Supported Browsers: The browsers supported by border-bottom-color property are listed below:
- Google Chrome 1.0 and above
- Edge 12.0 and above
- Internet Explorer 4.0 and above
- Firefox 1.0 and above
- Safari 1.0 and above
- Opera 3.5 and above