CSS border-left-width Property

CSS border-left-width Property

The border-left-width property in CSS is used to define the thickness of the left border of an element. It works alongside border-left-style and border-left-color to create a complete left border.

1. Syntax

selector {
  border-left-width: value;
}

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

Value Options:

• thin – Small predefined width

• medium (default) – Standard predefined width

• thick – Large predefined width

• Specific length units: px, em, rem, %, vw, vh, etc.

• inherit – Inherits from the parent element

• initial – Sets to default value (medium)

• unset – Resets to inherited or initial value

2. Example – Setting a Left Border Width

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 Predefined Widths (thin, medium, thick)

.box1 { border-left: thin solid red; }
.box2 { border-left: medium dashed green; }
.box3 { border-left: thick double blue; }

✅ Each box has a different left border width using predefined values.

4. Example – Dynamic Width with Percentage (%)

div {
  width: 200px;
  border-left-width: 10%;
  border-left-style: solid;
  border-left-color: black;
}

✅ The left border width will be 10% of the element’s width.

5. Example – Removing the Left Border

div {
  border-left-width: 0;
}

✅ The left border is removed.

6. Using border-left-width vs. Shorthand border-left

Longhand (border-left-width)	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.

7. Best Practices

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