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