border-bottom-style property CSS Reference

Definition and Usage

The border-bottom-style CSS property sets the line style of the bottom border of a box.

Note: The specification doesn't define how borders of different styles connect in the corners.

• Initial none
• Applies to all elements
• Inherited no
• Media visual
• Computed Value as specified
• Animatable no
• Canonical order the unique non-ambiguous order defined by the formal grammar

Syntax

Formal syntax: <br-style>

border-bottom-style: none
border-bottom-style: hidden
border-bottom-style: dotted
border-bottom-style: dashed
border-bottom-style: solid
border-bottom-style: double
border-bottom-style: groove
border-bottom-style: ridge
border-bottom-style: inset
border-bottom-style: outset
border-bottom-style: inherit

Values

<br-style>

Is a keyword describing the style of the bottom border. It can have the following values:

Style	Preview	Description
none		Like for the hidden keyword, displays no border. In that case, except if a background image is set, the calculated values of border-bottom-width will be 0, even if specified otherwise through the property. In case of table cell and border collapsing, the none value has the lowest priority: it means that if any other conflicting border is set, it will be displayed.
hidden		Like for the none keyword, displays no border. In that case, except if a background image is set, the calculated values of border-bottom-width will be 0, even if specified otherwise through the property. In case of table cell and border collapsing, the hidden value has the highest priority: it means that if any other conflicting border is set, it won't be displayed.
dotted		Displays a series of rounded dots. The spacing of the dots are not defined by the specification and are implementation-specific. The radius of the dots is half the calculated border-bottom-width.
dashed		Displays a series of short square-ended dashes or line segments. The exact size and length of the segments are not defined by the specification and are implementation-specific.
solid		Displays a single, straight, solid line.
double		Displays two straight lines that add up to the pixel amount defined as border-width or border-bottom-width.
groove		Displays a border leading to a carved effect. It is the opposite of ridge.
ridge		Displays a border with a 3D effect, like if it is coming out of the page. It is the opposite of groove.
inset		Displays a border that makes the box appear embedded. It is the opposite of outset. When applied to a table cell with border-collapse set to collapsed, this value behaves like groove.
outset		Displays a border that makes the box appear in 3D, embossed. It is the opposite of inset. When applied to a table cell with border-collapse set to collapsed, this value behaves like ridge.

inherit

Represents the border style used by the parent of the current element.

Examples

element {
        border-bottom-width: 1px;
        border-bottom-style: dotted;
        border-bottom-color: #000;
}

Compatibility

Desktop browsers

Mobile browsers