CSS Reference Property

border-bottom-width

The border-bottom-width property is used to set the width of the bottom border of an element.

The width of the border can be explicitly set using a <length> value, or by using one of three border width keywords: thin, medium, and thick.

Official Syntax

  • Syntax:

    border-bottom-width: <length> | thin | medium | thick
  • Initial: medium
  • Applies To: all elements
  • Animatable: yes

Notes

Note that the initial width is medium, but the initial border style of an element is none and therefore the used width is 0.

Values

<length>
The width of the border is set to the specified length. Negative values are not allowed.
thin
Implementation-specfic. See note below and the live demo for examples.
medium
Implementation-specfic. See note below and the live demo for examples.
thick
Implementation-specfic. See note below and the live demo for examples.

Notes

The specification doesn’t precisely define the thickness of each of the keywords, which is therefore implementation specific, but the values are constant throughout a document and thin ? medium ? thick. A browser could, for example, make the thickness depend on the medium font size: one choice might be 1px (for thin), 3px (for medium) & 5px (for thick) when the medium font size is 17px or less.

The border-bottom-width property can also inherit the value of the element’s parent’s bottom border width using the keyword inherit.

Examples

The following are all valid border-bottom-width values set on an element. The element’s border style and border color are also set using the border-bottom-style and border-bottom-color respectively.

.element {
    border-bottom-style: dotted;
    border-bottom-color: red;
    border-bottom-width: 10px;
    /* or */
    border-bottom-width: thin;
    /* or */
    border-bottom-width: 1em;
}
                

Live Demo

Have a look at the live demo:

View this demo on the Codrops Playground

Browser Support

The property works in all major browsers: Chrome, Firefox, Safari, Opera, IE, and on Android and iOS.

Written by

Last updated February 4, 2015 at 2:29 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.