CSS border-left-style Property

Set a CSS border-left-style:

div {border-left-style: dotted;}

Try it Yourself »

More “Try it Yourself” examples below.


Definition and Usage

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

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

A dashed left border:

div {bord

Try it Yurself »

Example

A solid left border:

div {border-left-style: solid;}

Try it Yourself »

Example

A double left border:

div {border-left-style: double;}

Try it Yourself »

Example

An outset left border:

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

Try it Yourself »