CSS border-bottom-width Property Tutorial

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.

Leave a Reply