border-left

style.css

/* Style only */
div.test { border-left: dashed;}

/* Style + width */
div.test1 { border-left: dashed 2px;}

/* Style + width + color */
div.test2 { border-left: solid 2px #000;}

/* Blockquote left accent line (common pattern) */
blockquote {
	border-left: 5px solid #aaa;
	padding-left: 16px;
	color: #555;
}

/* Color-coded card accents */
.card-warning { border-left: 6px solid #ff6600; padding-left: 16px;}
.card-info    { border-left: 6px solid #0077cc; padding-left: 16px;}
.card-success { border-left: 6px solid #00aa55; padding-left: 16px;}

/* Section heading left decoration */
h3.section-title {
	border-left: 4px solid #333;
	padding-left: 12px;
}

Value	Description
transparent	Sets the border to transparent.
Color code or color name	Changes the border to the specified color. If no『border-color』value is set, the color of the『color』property is used as the default.

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

Value	Description
Number	Specifies the border width using units such as『px』.
thin	Specifies using the keyword『thin』. Most browsers display this as 1px, though it may vary slightly.
medium	Specifies using the keyword『medium』. Most browsers display this as 3px, though it may vary slightly. This is the default when no『border-width』value is specified.
thick	Specifies using the keyword『thick』. Most browsers display this as 5px, though it may vary slightly.

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

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

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

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

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

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

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

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

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

※ Version information is based on MDN.

You can set the border-related properties『border-color』,『border-style』, and『border-width』at once. The order of values does not matter.

When you write the『border-left』property, any left border values not specified will be reset to their initial values. This means all previously set left border properties are overridden.

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

To display any left border, you must specify the『border-style』property. Since the default value of『border-style』is『none』(width 0), no border will be drawn unless a value is specified.