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:

• border-width
• border-style
• border-color

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.

Notes:

• 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.