border-left-color

Summary

The CSS border-left-color property sets the color of an element’s left border. This page explains the border-left-color value, but often you will find it more convenient to fix the border’s left color as part of a shorthand set, either border-left or border-color.

Colors can be defined several ways. For more information, see Usage.

Overview table

Initial value: color - The value of the 'color' property
Applies to: All elements
Inherited: No
Media: visual
Computed value: when taken from the ‘color’ property, the computed value of 'color’; otherwise, as specified
Animatable: Yes
CSS Object Model Property: borderTopColor
Percentages: N/A

Syntax

border-left-color: <color>
border-left-color: currentColor
border-left-color: inherit
border-left-color: transparent

Values

<color>: The computed value of the ‘color’ property. This value can be a basic color keyword, such as red or lavenderblush, a numerical value, an RGB or RGBA value, or an HSL or HSLA value. For more information, see Usage.
inherit: currentColor, the color value inherited from parent object.
currentColor: The same as ‘color: inherit’, the color value inherited from parent object.
transparent: Fully transparent. This keyword can be considered a shorthand for transparent black, rgba(0,0,0,0), which is its computed value.

Examples

The following example demonstrates the use of border-left-color by creating a set of 7 boxes with the rainbow colors, each box using a different way of color code representation. (Some style rules omitted for brevity.)

.box {
  border: 5px solid #efefef;
}

.named-value {
  border-left-color: red;
}

.hex-value {
  border-left-color: #FD6C02;
}

.rgb-value {
  border-left-color: rgb(255, 255, 0);
}

.rgb-percentage-value {
  border-left-color: rgb(0%, 100%, 0%);
}

.hsl-value {
  border-left-color: hsl(240, 100%, 50%);
}

.rgba-value {
  border-left-color: rgba(75, 0, 130, 0.8);
}

.hsla-value {
  border-left-color: hsla(282, 100%, 41%, 0.8);
}

View live example

<div class="box named-value">
  <h1>Named color</h1>
  <p><code>red</code></p>
</div>

<div class="box hex-value">
  <h1>Hexadecimal color</h1>
  <p><code>#FD6C02</code></p>
</div>

<div class="box rgb-value">
  <h1>RGB color</h1>
  <p><code>rgb(255, 255, 0)</code></p>
</div>

<div class="box rgb-percentage-value">
  <h1>RGB percentage color</h1>
  <p><code>rgb(0%, 100%, 0%)</code></p>
</div>

<div class="box hsl-value">
  <h1>HSL color</h1>
  <p><code>hsl(240, 100%, 50%)</code></p>
</div>

<div class="box rgba-value">
  <h1>RGB with alpha color</h1>
  <p><code>rgba(75, 0, 130, 0.8)</code></p>
</div>

<div class="box hsla-value">
  <h1>HSL with alpha color</h1>
  <p><code>hsla(282, 100%, 41%, 0.8)</code></p>
</div>

Usage

 The color value can be a property keyword, an extended keyword, or a numerical value. The two property keywords are currentColor and transparent. currentColor is the ‘color’ property value from the parent object. transparent is shorthand for transparent black, rgba(0,0,0,0).

The color value can also be a numerical value, such as one of the following:

a basic color keyword, such as “red”
a hex value, such as #ff0000
an red-green-blue (RGB) value, such as rgb(255,0,0)
an RGB-alpha (RGBA) that includes color opacity, such as rgba(255,0,0,1) or rgba(100%,0%,0%,1)
a hue-saturation-lightness (HSL), such as hsl(0, 100%, 50%)
HSLa, such as hsl(0, 100%, 50%, 1)

The color value can also be an extended keyword, such as aliceblue or lavenderblush. For a full list of extended keywords, see the CSS Color Module Level 3 spec, which is the consolidation of various specifications.

Related specifications

CSS Level 3 - Backgrounds and Borders Module: Candidate Recommendation
CSS Level 2 (Revision 1): Recommendation

Attributions

Microsoft Developer Network: [Windows Internet Explorer API reference Article]