CSS border-left-style Property

CSS border-left-style property allows us to set the style of the element’s left border. For example, we can set a ‘solid’, ‘dashed’, ‘dotted’, etc. kind of border styles.

See the paragraph below. It has a dashed left border.

This paragraph has a dashed left border.

Example:

h1{
  border-left-style: dashed;
}
h2{
  border-left-style: dotted;
}

There are various types of border styles available in CSS. Try out the below example to have a look:

Example:

p.solid { border-left-style: solid; }
p.dashed { border-left-style: dashed; }
p.dotted { border-left-style: dotted; }
p.double { border-left-style: double; }
p.groove { border-left-style: groove; }
p.ridge { border-left-style: ridge; }
p.inset { border-left-style: inset; }
p.outset { border-left-style: outset; }
p.hidden { border-left-style: hidden; }
p.none { border-left-style: none; }

Output:

A solid border

A dashed border

A dotted border

A double border

A groove border

A ridge border

An inset border

An outset border

A hidden border

No border

CSS Syntax

The border-left-style property has the following syntax:

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

Property Values

The border-left-style property accepts following values:

solidSpecifies a solid border.
dashedSpecifies a dashed border.
dottedSpecifies a dotted border.
doubleSpecifies a double border.
grooveSpecifies a 3D grooved border.
ridgeSpecifies a 3D ridge border.
insetSpecifies a 3D inset border.
outsetSpecifies a 3D outset border.
hiddenHides the border.
noneSpecifies no border. This is the default value.
initialSets the border-left-style to its default value(none).
inheritInherits the border-left-style from the parent element.

General Info

Default Valuenone
InheritedNo
JavaScript Usageelement.style.borderLeftStyle = “dashed”

Related Pages

CSS Tutorial: CSS Borders