CSS border-left-style Property

The border-left-style property sets the left border style.

Possible values include solid, dashed, dotted, and others.

A border-style value is required for any border to display.

Example

#

A dashed border-left-style.

A dashed border-left-style
<style>
  .border-dashed {
    padding: 15px;
    border-left-width: 3px;
    border-left-style: dashed;
  }
</style>

<div class="border-dashed">
  A dashed border-left-style
</div>

Using border-left-style

The border-left-style specifies an element's left border style.

This property is required to add a left border to an element.

If no border-left-color is specified, the color will inherit from the text.

If no border-left-width is specified, the width will be medium width or 1px.

Syntax

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

Values

#

Value Description
none Default. No border
hidden Same as none except for table, it conflicts on the resolution
dotted Dotted border
dashed Dashed border
solid Solid border
double Double border
groove 3D groove border
ridge 3D ridge border
inset 3D inset border
outset 3D outset border
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different border-left-style values.

border-left-style: dotted
<style>
  .border-left-example {
    padding: 15px;
    border-color: firebrick;
    border-left-width: 3px;
    border-left-style: dotted;
  }
</style>

<div class="border-left-example">
  border-left-style: dotted
</div>

Browser support

This table shows when border-left-style support started for each browser.

Chrome
1.0 Dec 2008
Firefox
1.0 Nov 2004
IE/Edge
5.5 Jul 2000
Opera
9.2 Apr 2007
Safari
1.0 Jun 2003

You may also like

Guides