The border-left-style CSS property sets the line style of an element's left border.

/* Keyword values */
border-left-style: none;
border-left-style: hidden;
border-left-style: dotted;
border-left-style: dashed;
border-left-style: solid;
border-left-style: double;
border-left-style: groove;
border-left-style: ridge;
border-left-style: inset;
border-left-style: outset;

/* Global values */
border-left-style: inherit;
border-left-style: initial;
border-left-style: unset;
Note: The specification doesn't define how borders of different styles connect in the corners.

Initial valuenone
Applies toall elements. It also applies to ::first-letter.
Inheritedno
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Syntax

The border-left-style property is specified as a single keyword chosen from those available for the border-style property.

Formal syntax

<br-style>

where
<br-style> = none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Examples

HTML

<table>
  <tr>
    <td class="b1">none</td>
    <td class="b2">hidden</td>
    <td class="b3">dotted</td>
    <td class="b4">dashed</td>
  </tr>
  <tr>
    <td class="b5">solid</td>
    <td class="b6">double</td>
    <td class="b7">groove</td>
    <td class="b8">ridge</td>
  </tr>
  <tr>
    <td class="b9">inset</td>
    <td class="b10">outset</td>
  </tr>
</table>

CSS

/* Define look of the table */
table {
  border-width: 2px;
  background-color: #52E385;
}
tr, td {
  padding: 3px;
}

/* border-left-style example classes */
.b1 {border-left-style: none;}
.b2 {border-left-style: hidden;}
.b3 {border-left-style: dotted;}
.b4 {border-left-style: dashed;}
.b5 {border-left-style: solid;}
.b6 {border-left-style: double;}
.b7 {border-left-style: groove;}
.b8 {border-left-style: ridge;}
.b9 {border-left-style: inset;}
.b10 {border-left-style: outset;}

Result

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3
The definition of 'border-left-style' in that specification.
Candidate Recommendation No significant change.
CSS Level 2 (Revision 1)
The definition of 'border-left-style' in that specification.
Recommendation Initial definition.

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic Support1 (Yes)115.59.21
FeatureAndroidChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic Support2.3 (Yes) (Yes)1417 (Yes) (Yes)

1. Prior to Firefox 50, border styles of rounded corners (with border-radius) were always rendered as if border-bottom-style was solid. This has been fixed in Firefox 50.

See also

Document Tags and Contributors

 Last updated by: teoli,