In this section, we will learn what the border-bottom-width property is and how to use it in CSS.
Click here to run the example of border-bottom-width property.
CSS border-bottom-width Property Definition and Usage
The border-bottom-width property is used to set the width of the bottom border of an element.
Note: an element must have a border already so that you could use this property. So first and foremost, use border-style or border-bottom-style to create that border and then use this property to change the width.
CSS border-bottom-width Property Syntax
border-bottom-width: medium|thin|thick|length|initial|inherit;
CSS border-bottom-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-bottom-width property in CSS
See the Pen border-bottom-width property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.
How Does CSS border-bottom-width Property Work?
As you can see, in this example, before using the border-bottom-width, we’ve first set the border-bottom-style property to create the border and then used this property to set its width.
