CSS border-left-color Property

CSS border-left-color Property

The border-left-color property in CSS is used to set the color of the left border of an element. This property does not work unless a border-left-style is defined.

1. Syntax

selector {
  border-left-color: color;
}

✅ The color can be specified using color names, HEX codes, RGB, RGBA, or HSL.

Value Options:

Value	Description
Color Name	red, blue, green, etc.
Hex Code	#ff5733, #000000, etc.
RGB	rgb(255, 0, 0)
RGBA	rgba(255, 0, 0, 0.5) (with transparency)
HSL	hsl(0, 100%, 50%)

2. Example – Setting Left Border Color

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 the border-left Shorthand

div {
  border-left: 4px dashed red;
}

✅ This is equivalent to:

div {
  border-left-width: 4px;
  border-left-style: dashed;
  border-left-color: red;
}

4. Example – Transparent Left Border

div {
  border-left: 3px solid transparent;
}

✅ The left border exists but is invisible.

5. Example – Different Border Colors for Each Side

div {
  border-top-color: red;
  border-right-color: blue;
  border-bottom-color: green;
  border-left-color: purple;
  border-style: solid;
  border-width: 5px;
}

✅ Each side has a different color.

6. Removing the Left Border

div {
  border-left: none;
}

✅ Removes the left border.

7. Border-Left-Color vs. Shorthand Border

border-left-color	Shorthand border-left
Only sets color	Sets width, style, and color
border-left-color: red;	border-left: 2px solid red;

✅ Use border-left shorthand when setting width, style, and color together.

8. Best Practices

✔ Always define border-left-style for the border to appear.
✔ Use border-left shorthand when setting multiple properties.
✔ Use border-left: none; to remove the left border.