CSS border-bottom-color property
CSS border-bottom-color property is used to specify the bottom border color for HTML Element(s).
The syntax to specify a value for border-bottom-color property is
border-bottom-color: value;
The following table gives the possible values that could be given to border-bottom-color property.
| Value | Description | Example |
|---|---|---|
| color | Any valid CSS color value. | border-bottom-color: red;border-bottom-color: #f00;border-bottom-color: #ff000088;border-bottom-color: rgb(25, 220, 85); |
| transparent | Sets bottom border color to transparent. | border-bottom-color: transparent; |
| initial | Sets bottom border color to default value. | border-bottom-color: initial; |
| inherit | Inherits bottom border color value from its parent element. | border-bottom-color: inherit; |
Note: Please note that there must be a style specified for border or bottom border, to apply this color.
Examples
In the following examples, we apply a color for bottom border using different types of allowed values for border-bottom-color property.
HEX Value for border-bottom-color
In the following example, we set border-bottom-color for <h1> elements with hex value of #ab22ff.
index.html
RGB Value for border-bottom-color
In the following example, we set border-bottom-color for <h1> elements with RGB color value of rgb(224, 143, 242).
index.html
RGBA Value for border-bottom-color
In the following example, we set border-bottom-color for <h1> elements with RGBA color value of rgb(224, 143, 242, 0.5).
index.html
HSL Value for border-bottom-color
In the following example, we set border-bottom-color for <h1> elements with HSL color value of hsl(98, 49%, 74%).
index.html
HSLA Value for border-bottom-color
In the following example, we set border-bottom-color for <h1> elements with HSLA color value of hsl(98, 49%, 74%, 0.5).
index.html
border-bottom-color: transparent;
In the following example, we set border-bottom-color for <h1> elements with value of transparent.
index.html
Conclusion
In this CSS Tutorial, we learned about border-bottom property, and how to use this property for HTML Elements, with examples.