CSS border-left-style Property

CSS border-left-style Property

The border-left-style property in CSS is used to define the style of the left border of an element. It controls how the left border looks, such as solid, dashed, or double.

1. Syntax

selector {
  border-left-style: value;
}

✅ The border-left-style property requires a border-left-width to be visible.

Value Options:

Value	Description
none	No border (default)
solid	A single solid line
dotted	A series of dots
dashed	A series of dashes
double	Two solid lines
groove	A 3D grooved effect
ridge	A 3D ridged effect
inset	A 3D inset effect
outset	A 3D outset effect

2. Example – Setting a Solid Left Border

div {
  border-left-width: 5px;
  border-left-style: solid;
  border-left-color: blue;
}

✅ The left border will be 5px thick, solid, and blue.

3. Example – Using Different Styles

.box1 { border-left: 4px dotted red; }
.box2 { border-left: 6px dashed green; }
.box3 { border-left: 8px double blue; }
.box4 { border-left: 5px groove purple; }
.box5 { border-left: 5px inset gray; }

✅ Each element has a different left border style.

4. Example – Removing the Left Border

div {
  border-left-style: none;
}

✅ The left border is removed.

5. Using border-left-style vs. Shorthand border-left

Longhand (border-left-style)	Shorthand (border-left)
border-left-width: 4px;	border-left: 4px solid red;
border-left-style: solid;
border-left-color: red;

✅ Shorthand is preferred when setting multiple border properties.

6. Best Practices

✔ Always specify border-left-width, or the border won't be visible.
✔ Use shorthand border-left for cleaner code.
✔ Use none instead of 0px to completely remove the border.