In this section, we will learn what the border-top-width property is and how to use it in CSS.

Click here to run the example of border-top-width property.

CSS border-top-width Property Definition and Usage

The border-top-width property is used to set the width of the top border of an element.

Note: the target element must have a border already so that you could use this property. So first and foremost, use border-style or border-top-style to create that border and then use this property to change the width.

CSS border-top-width Property Syntax

border-top-width: medium|thin|thick|length|initial|inherit;

CSS border-top-width Property Value

The value of this property is any relative (except for percentage) or absolute units that are supported in CSS.

Also, we can use these values as well:

• medium: this value will set the width of a border to a medium size.
• thin: this value sets the width of a border to a thin size.
• thick: this value sets the width of a border to a thick size.

Also, the two global values “initial” and “inherit” could be used as well.

Example: border-top-width property in CSS

See the Pen border-top-width property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.

How Does CSS border-top-width Property Work?

As you can see, in this example, before using the border-top-width, we’ve first set the border-top-style property to create the border and then used this property to set its width.