Caution

JavaScript is disabled in your browser.
This site uses JavaScript for features such as search.
For the best experience, please enable JavaScript before browsing this site.

CSS Dictionary

Home
CSS Dictionary
border-left-style

border-left-style

Specifies the style of the left border.

Sample Code

div.test { border-left-style: solid;}
div.test1 { border-left-style: dashed;}
div.test2 { border-left-style: dotted;}

Available Values

Value	Description
none	No border is drawn. The width is also set to 0. This is the default value.
solid	Draws a single solid line border.
dashed	Draws a dashed border with larger gaps.
dotted	Draws a dotted border with smaller gaps.
double	Draws a double line border.
groove	Draws a border that looks carved in. The opposite of『ridge』.
ridge	Draws a border that looks raised. The opposite of『groove』.
inset	Draws a border that looks embedded. The opposite of『outset』.
outset	Draws a border that looks raised outward. The opposite of『inset』.

Browser Preview

<div style="border-left-style: solid; height: 100px; padding: 10px; font-weight: bold;">A div element with height 100px and padding 10px.</div>

Browser Compatibility

Desktop

Chrome

1+ ○

Firefox

1+ ○

Safari

1+ ○

Edge

12+ ○

Supported in all versions

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

9.2+ ○

8 and below ×

Mobile

iOS Safari

1+ ○

Android Browser

2.2+ ○

1 and below ×

Chrome Android

Latest ○

Same support as desktop version

Firefox Android

Latest ○

Same support as desktop version

※ Version information is based on MDN.

Notes

Specifies the style of the left border.

If no value is specified for『border-left-style』, it defaults to『none』, which sets the width to 0 and draws no border. To display any border, you must set『border-left-style』to a value other than『none』.

If you find any errors or copyright issues, please contact us.

Home