In this section, we will learn what the border-bottom property is and how to use it in CSS.
CSS border-bottom Property Definition and Usage
The border-bottom property is a shorthand property that focuses on the bottom border of an element and allows us to change the “width”, “style”, and “color” property of this border all at one declaration.
Here’s the order from which we set values for the `border-bottom` property:
CSS border-bottom Property Syntax
border-bottom: border-width border-style border-color|initial|inherit;
CSS border-bottom Property Value
As the syntax of this property shows, the border-bottom property takes three values:
- The first value is the one we set for the border-width property.
- The second value is the one we set for the border-style property.
- And the last value is the one we set for the border-color property.
Note: We can use the two global values “initial” and “inherit” here as well.
Example: border-bottom property in CSS
See the Pen border-bottom property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS border-bottom Property Work?
The border-bottom property is a way of styling the bottom border of an element. This means the other border sides won’t take effect from this property.
