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

style.css

/* Solid line */
div.test { border-left-style: solid;}

/* Dashed line (larger gaps) */
div.test1 { border-left-style: dashed;}

/* Dotted line (smaller gaps) */
div.test2 { border-left-style: dotted;}

/* No border (default) */
div.test3 { border-left-style: none;}

/* Double line */
div.test4 { border-left-style: double;}

/* Carved-in look */
div.test5 { border-left-style: groove;}

/* Practical example: blockquote left accent */
blockquote {
	border-left-style: solid;
	border-left-width: 5px;
	border-left-color: #aaa;
	padding-left: 16px;
	color: #555;
}

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>

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』.