CSS border-bottom-style Property


Example

Set the style of the bottom border:

p {
    border-style: solid;
    border-bottom-style: dotted;
}

Try it yourself »

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


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

Note: The value "hidden" is not supported in IE7 and earlier. IE8 requires a !DOCTYPE. IE9 and later support "hidden".


CSS Syntax

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

Property Values

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

Related Pages

CSS tutorial: CSS Border

CSS reference: border-bottom property

HTML DOM reference: borderBottomStyle property



Color Picker

colorpicker