CSS border-bottom-width Property

CSS border-bottom-width property specifies the width of the bottom-border of the element.

The width of the border can be set using keywords like ‘thin’, ‘medium’, ‘thick’, or using a valid CSS length format like ‘px’, ’em’, ‘rem’, ‘cm’ etc.

See the paragraph below. It has a thick bottom border.

This paragraph has a medium thickness bottom border.

Try out the example below to see how it works:

Example:

p.medium{
  border-bottom-width: medium;
}
p.thin{
  border-bottom-width: thin;
}
p.thick{
  border-bottom-width: thick;
}
p.pixel{
  border-bottom-width: 5px;
}

Note: An element must have a border before applying the border-bottom-width property. Otherwise, the property will have no effect on the element.


CSS Syntax

The border-bottom-width property has following syntax:

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

Property Values

The border-bottom-width property accepts the following values:

mediumSpecifies a medium thickness bottom border. This is the default value.
thinSpecifies a thin bottom border.
thickSpecifies a thick bottom border.
lengthSpecifies the thickness of the bottom border in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc.
initialSets the border-bottom-width property to its default value(medium).
inheritInherits the border-bottom-width property from its parent element.

General Info

Default Valuemedium
InheritedNo
JavaScript Usageelement.style.borderBottomWidth = “3px”

More Examples

Set the bottom border width using ‘rem’.

Example:

p{
  border-bottom-width: 0.3rem;
}

Set the bottom border width using ’em’.

Example:

p{
  border-bottom-width: 0.3em;
}

Related Pages

CSS Tutorial: CSS Borders