CSS border-bottom-style Property

Set a border-bottom-style:

div {border-bottom-style: dotted;}

Try it Yourself »

More “Try it Yourself” examples below.


Definition and Usage

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

Default value: none
Inherited: no
Animatable: no. Read about animatable
Version: CSS1
JavaScript syntax: object.style.borderBottomStyle=”dotted” Try it
ثSS Syntax
border-bottom-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;
Property Values
Value Description Code
none Specifies no border. This is default div {
border-width:5px;
border-bottom-style:none;
}
hidden The same as “none”, except in border conflict resolution for table elements div {
border-width:5px;
border-bottom-style:hidden;
}
dotted Specifies a dotted border div {
border-width:5px;
border-bottom-style:dotted;
}
dashed Specifies a dashed border div {
border-width:5px;
border-bottom-style:dashed;
}
solid Specifies a solid border div {
border-width:5px;
border-bottom-style:solid;
}
double Specifies a double border div {
border-width:5px;
border-bottom-style:double;
}
groove Specifies a 3D grooved border. The effect depends on the border-color value div {
border-width:5px;
border-bottom-style:groove ;
}
ridge Specifies a 3D ridged border. The effect depends on the border-color value div {
border-width:5px;
border-bottom-style:ridge;
}
inset Specifies a 3D inset border. The effect depends on the border-color value div {
border-width:5px;
border-bottom-style:inset;
}
outset Specifies a 3D outset border. The effect depends on the border-color value div {
border-width:5px;
border-bottom-style:outset;
}
initial Sets this property to its default value. Read about initial div {
border-width:5px;
border-bottom-style:initial;
}
inherit Inherits this property from its parent element. Read about inherit
Example

A dashed bottom border:

div {border-bottom-style: dashed;}

Try it Yourself »

Example

A groove bottom border:

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

Try it Yourself »