CSS border-left Property

CSS border-left Property

The border-left property in CSS is a shorthand property used to set the width, style, and color of the left border of an element in a single line.

1. Syntax

selector {
  border-left: width style color;
}

✅ Each value is optional, but the style must be defined for the border to be visible.

Value Options:

Value	Description	Example
width	Specifies the thickness of the left border	2px, thin, thick, 10px
style	Defines the border appearance	solid, dashed, double, none
color	Specifies the border color	red, #00ff00, rgba(0,0,255,0.5)

2. Example – Setting a Solid Left Border

div {
  border-left: 5px solid 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 box has a different left border style.

4. Example – Using Individual Properties

Instead of shorthand, you can use separate properties:

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

✅ This achieves the same effect as border-left: 5px solid red;.

5. Example – Removing the Left Border

div {
  border-left: none;
}

✅ The left border is removed.

6. Border-Left vs. Full Border

Shorthand border-left	Shorthand border
Only affects the left border	Affects all sides
border-left: 3px solid red;	border: 3px solid red;

✅ Use border-left when you only need a left border, and border when you need all sides.

7. Best Practices

✔ Always specify border-left-style, or the border won’t appear.
✔ Use shorthand border-left instead of separate properties for cleaner code.
✔ Set border-left: none; to remove the left border instead of 0px.