CSS border-left-color Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The border-left-color property defines the color used to paint an element’s left border. It only affects the left edge and does not by itself create a visible edge; the border must have a non‑none style and a non‑zero width to be rendered. That means the actual visible result depends on the corresponding style (for example, the left border’s line type) - see border-left-style for the property that controls whether that edge is drawn.

This property participates in the normal cascade and interacts with shorthand properties. A shorthand such as border or the multi-side border-color can set the left border color as part of a larger declaration, but a later or more specific longhand border-left-color overrides the shorthand for that side. Conversely, applying a shorthand after a longhand can replace the left color unless the shorthand explicitly leaves that component unchanged, so the order and specificity of declarations determine the effective left-border color.

On the styling and painting side, border-left-color is a visual property only - it does not inherit from the element’s text color automatically, but authors typically coordinate it with the element’s foreground using the generic color system when desired; see color for the property that sets the element’s text (foreground) color. When rendering, the final painted color for the left edge is the result of the cascade and any painting compositing/alpha the browser applies; if the left edge is not painted because of style/width, the color has no visual effect.

Definition

Initial value: currentColor
Applies to: All elements
Inherited: No
Computed value: The computed color
Animatable: Yes
JavaScript syntax: object.style.borderLeftColor

Interactive Demo

border-left-color: blue;

border-left-color: #ADB946;

border-left-color: rgb(25, 201, 33);

border-left-color: rgba(123, 45, 87, .5);

border-left-color: transparent;

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff. Somewhere, beyond the veil of dusk, a coyote laughed, echoing through the stillness like a forgotten memory.

Syntax

border-left-color: <color>

Values

<color>The computed value of the 'color' property. This value can be a basic color keyword, such as red or green, a numerical value, an RGB or RGBA value, or an HSL or HSLA value.
transparentFully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.
inherit

Example

HTML

<div class="card">

  <h2>Example: border-left-color</h2>

  <p>The left border color is set using the CSS property <code>border-left-color</code>.</p>

</div>

CSS

.card {
  border: 2px solid #ccc;
  border-left-width: 6px;
  border-left-color: #ff6347;
  padding: 16px;
  width: 320px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background: #ffffff;
  font-family: Arial, sans-serif;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS border-left-color property. Hover over a browser icon to see the version that first introduced support for this CSS property.