CSS Reference Property

border-bottom

The border-bottom property is a shorthand property used to specify the width, style and color of the bottom border of an element.

It is a shorthand property for the longhand properties: border-bottom-width, border-bottom-style and border-bottom-color properties of an element.

The border-bottom property can accept one, two or three arguments as a value—omitted values are set to their initial values.

Official Syntax

  • Syntax:

    border-bottom: <line-width> || <line-style> || <color>
    
  • Initial: 0 none currentColor, which is the concatenation of the initial values of the long-hand properties.
  • Applies To: all elements
  • Animatable: The width and color of the border are animatable.

Values

<line-width>

The width of the bottom border. Refer to the border-bottom-width property entry for a list of possible values.

<line-style>

The style of the bottom border. Refer to the border-bottom-style property entry for a list of possible values.

<color>
The color of the bottom border. Refer to the border-bottom-color property entry for a list of possible values.

Examples

The following are all valid border-bottom values set on an element.

.element {
    border-bottom: 1em; /* style and color are set to their initial values */

    /* or */
    border-bottom: dotted deepPink; /* width is set to its initial value (0), which means that no bottom border will be set */

    /* or */
    border-bottom: 1px dotted #eee;

    /* or */
    border-bottom: 10px solid #009966;
}
                

Live Demo

Check out 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 3, 2015 at 4:40 pm by Manoela Ilic.

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