In this section, we will learn what the border-top property is and how to use it in CSS.
CSS border-top Property Definition and Usage
In CSS, you have this ability to style each border of an element individually.
For example, the border-top property is a property that specifically focuses on the top border of an element.
The border-top is a shorthand property and allows us to set values for three other properties:
Basically, via the border-top property, we can change the “width”, “style”, and “color” of the top border of an element all in one declaration.
CSS border-top Property Syntax
border-top: border-width border-style border-color|initial|inherit;
CSS border-top Property Value
As the syntax of this property shows, the border-top 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.
- We can use the two global values “initial” and “inherit” here as well.
- If you omit the color value in this property, the color of the border becomes the same as the font color of that element.
Example: border-top property in CSS
See the Pen border-top property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS border-top Property Work?
In this example, we’ve intentionally left out the color value in the border-top property.
But as you can see, the font color in this element is set to red. Hence, the color of the border becomes red as well.