In this section, we will learn what the border-bottom-color property is and how to use it in CSS.
Click here to run the example border-bottom-color property.
CSS border-bottom-color Property Definition and Usage
The border-bottom-color property is used to set a color value for the bottom border of an element.
Note: before using this property, the border should already exist. We can create a border via the border-style, border-bottom-style, or border property.
CSS border-bottom-color Property Syntax
border-bottom-color: color|transparent|initial|inherit;
CSS border-bottom-color Property Value
We can use RGB, RGBA, HSL, HSLA, color-name as the value of this property.
Also, we could use the value “transparent” to set a transparent color for the target bottom border.
Example: border-bottom-color property in CSS
See the Pen border-bottom-color property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS border-bottom-color Property Work?
Here we’ve used the border-bottom-color property to change the color of the bottom border from black to red. (The default color is the color of the element’s font)