border-bottom-style

Sets the styling of the bottom border for the element.

Syntax

border-bottom-style sets the style of the bottom border as one of the predefined values. The list of possible values is: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset, initial, inherit.

/* setting the bottom border to be dotted */
border-bottom-style: dotted;

/* example with complete border-bottom styling: */
h1 {
  border-bottom-style: dashed;
  border-bottom-color: #594121;
  border-bottom-width: 3px;
}

Values

none
No border will be used, this is the default value.

hidden
Same effect as none with the exception that this value resolves some border-conflicts in tables.

dotted
The border will be a dotted line.

dashed
The border will be made of dashes.

solid
The border will be a solid line.

double
The border will be made of a double line.

groove
Specifies a “3D” groove border to be used.

ridge
Specifies a “3D” ridged border to be used.

inset
Specifies a “3D” inset border to be used.

outset
Specifies a “3D” outset border to be used.

initial
Global CSS keyword – this sets the property to the default value.

inherit
Global CSS keyword – this sets the property to be inherited from its parent element.

Browser Compatibilty

Demos

Have a code example of border-bottom-style? Submit a codepen.io demo and we'll showcase it here ↴