CSS border-left-color Property

This property defines the color of the left-side border of an element.

selector { border-left-color: value; }
<color> Defines the color using name, hex, RGB, RGBA, HSL, or HSLA formats.
transparent Sets the color to be fully see-through, keeping the border width but hiding the stroke.
currentcolor Forces the border color to match the value of the element's color property.
inherit Adopts the border-left-color value from the element's parent.
initial Resets the property to its default value.
revert Applies the styling defined by the user agent's default stylesheet.
unset Resets the property to its natural value, which is inherited if it inherits or initial if it does not.

Code Examples

A basic example showing a solid blue left border used as a decorative accent for a callout box.

<div style="border-left-style: solid; border-left-width: 10px; border-left-color: #007bff; padding: 15px; background-color: #f0f7ff;">
  This is a callout box with a blue left border accent.
</div>

An advanced example using JavaScript to dynamically change the left border color based on a status update.

<style>
  .dynamic-card {
    padding: 20px;
    border-left: 5px solid #cccccc;
    font-family: sans-serif;
  }
</style>

<div id="statusCard" class="dynamic-card">
  Current Status: Pending
</div>
<button onclick="setSuccess()">Complete Task</button>

<script>
  function setSuccess() {
    const card = document.getElementById("statusCard");
    card.style.borderLeftColor = "#28a745";
    card.innerHTML = "Current Status: Success";
  }
</script>

Pro Tip

You can create a vertical separator between navigation items or list items by applying a border-left-color and a border-left-width to the elements, rather than using separate div or span elements just for decorative lines.

Deep Dive

Think of border-left-color as painting just the left-hand post of a fence. You are targeting a specific edge of the box model without affecting the top, right, or bottom sides. This is a longhand property, providing more surgical control than the border-color shorthand. For this property to render visually, the element must also have a defined border-left-style, such as solid or dashed, and a border-left-width greater than zero. If no color is specified, it defaults to the current text color of the element.

Best Practices

Use this property when you want to highlight a specific side of an element, like a color-coded sidebar in a dashboard or a decorative quote block. It is more efficient to use this longhand property than to redefine the entire border shorthand if you only intend to change the color of one side. Using currentcolor is a great way to keep your borders synced with your text themes without writing extra CSS.

Common Pitfalls

The most common mistake is forgetting that borders have a default style of none. If you set the color but don't set a style like solid, the border will have zero thickness and won't show up at all. It is like buying high-quality paint but having no wall to put it on. Also, remember that border-left-color will override any general color set by the border-color shorthand if it appears later in the cascade.

Accessibility

Ensure the contrast ratio between the border color and the background is high enough for users with visual impairments to identify the boundary. If the border is used to convey meaning, such as indicating a valid or invalid form field, do not rely on color alone; use icons or text labels to accompany the visual cue.

Dev Data Table: border-left-color property

default the color of the element
animatable yes
inherited no
experimental no
year_intro 1996
year_standard 1998
js_syntax_1 element.style.borderLeftColor = "#ff0000";
js_syntax_2 element.style.setProperty("border-left-color", "#ff0000");
js_note In JavaScript, the property name is camelCased as borderLeftColor when interacting with the style object.
browsers { "Chrome": 1, "Edge": 12, "Firefox": 1, "Safari": 1, "Opera": 3.5, "Chrome Android": 18, "Safari on iOS": 1, "Samsung Internet": 1, "Opera Mobile": 10 }
results render here...