By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

CSS Border-bottom-width Property

This reference shows how to use the border-bottom-width property of CSS.

Edited: 2015-12-09 14:54

The border-bottom-width is used to control the width of the bottom border of a HTML element.

div {
  border-bottom-width: 1px;

The border-bottom-width property will usually be used in combination with the other orientational properties, such as border-bottom-style and border-bottom-color, but it can also be used with a shorthand property, such as the border property.

The border-width property can be used to modify the width of all four borders.

Possible Values

Read Units of Measurement to understand the values

Inherited? NO!

Border-bottom-width example

The border-bottom-width property can be used in at least two ways. One way is to combine it with the use of border-bottom-style and border-bottom-color, which specifically targets the bottom border of an element.

.test {

Which will look like:

Another way is to combine the use of the shorthand border property, with the use of border-bottom-width. Doing this will apply a general style for all four borders, and only modify the styles of the bottom border.

.test {
  border:1px solid red;

Which will look like:

As you can see, it can sometimes be useful to combine the use of the orientational properties with the more generally applied shorthand'(s).