CSS border-bottom-style Property

Example

Set a style for the bottom border:

div {border-bottom-style: dotted;}

Definition and Usage

The border-bottom-style property sets the style of an element's bottom border.

Default value:	none
Inherited:	no
Animatable:	no.
Version:	CSS1
JavaScript syntax:	object.style.borderBottomStyle="dotted"

• Inherited : "Inherited = no" means that it cannot takes (inherit) it's value from it's parent element.
• object - object in javascript means the element on which border-bottom-style is applied.
• Animatable - "Animatable = no" means that it cannot be animated with CSS @keyframes.

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
border-bottom-style	1.0	5.5	1.0	1.0	9.2

CSS Syntax

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

Property Values

Value	Description	Demo
none	Specifies no border. This is default
hidden	The same as "none", except in border conflict resolution for table elements
dotted	Specifies a dotted border
dashed	Specifies a dashed border
solid	Specifies a solid border
double	Specifies a double border
groove	Specifies a 3D grooved border. The effect depends on the border-color value
ridge	Specifies a 3D ridged border. The effect depends on the border-color value
inset	Specifies a 3D inset border. The effect depends on the border-color value
outset	Specifies a 3D outset border. The effect depends on the border-color value
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

More Examples

Example

A dashed bottom border:

div {border-bottom-style: dashed;}

Example

A solid bottom border:

div {border-bottom-style: solid;}

Example

A double bottom border:

div {border-bottom-style: double;}

Example

Remove the bottom border:

div {border-bottom-style: none;}

Example

A groove bottom border:

div {
  border-bottom-style: groove;
  border-bottom-color: coral;
  border-bottom-width: 7px;
}

Example

A ridge bottom border:

div {
  border-bottom-style: ridge;
  border-bottom-color: coral;
  border-bottom-width: 7px;
}

Example

An inset bottom border:

div {
  border-bottom-style: inset;
  border-bottom-color: coral;
  border-bottom-width: 7px;
}

Example

An outset bottom border:

div {
  border-bottom-style: outset;
  border-bottom-color: coral;
  border-bottom-width: 7px;
}