CSS border-left-color Property

Definition and Usage

The border-left-color property sets the color of an element’s physical left border. It does not set width or style. You can also set this color with border-left or border-color.

The initial value is currentColor, so the left border matches the element’s text color until you override it. A visible border-left-style and non-zero border-left-width are still required for the color to show.

CSS Syntax

Accepts any CSS color: named colors, hex, rgb(), hsl(), currentColor, or transparent.

Property Values

How to Use border-left-color

Make sure a left border exists, then paint only its color.

1. Give the element a left border with a visible style and width (or use border-left).
2. Set border-left-color to any CSS color.
3. Leave other sides alone — this property never colors top, right, or bottom.
4. Prefer the longhand when width and style are already set and you only need to change the color.

Live Preview

Width and style stay fixed. Change only border-left-color and watch the left edge repaint.

CSS Examples

Each snippet focuses on border-left-color. Use Try It Yourself for a live editor.

<style>
  div {
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: #2563eb;
    padding: 12px;
  }
</style>

<div>Blue left border</div>

<style>
  div {
    color: #7c3aed;
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: currentColor;
    padding: 12px;
  }
</style>

<div>Matches text color</div>

<style>
  div {
    border-left-width: 4px;
    border-left-style: solid;
    border-left-color: transparent;
    padding: 12px;
    background: #f1f5f9;
  }
</style>

<div>Invisible left stroke</div>

Key Takeaways