The border-left-color CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties border-color or border-left.

/* <color> values */ border-left-color: red; border-left-color: #ffbb00; border-left-color: rgb(255, 0, 0); border-left-color: hsla(100%, 50%, 25%, 0.75); border-left-color: currentcolor; border-left-color: transparent;  /* Global values */ border-left-color: inherit; border-left-color: initial; border-left-color: revert; border-left-color: unset; 

border-left-color

The border-left-color CSS property sets the color of an element's left border. It can also be set with the shorthand CSS properties border-color or border-left.

Syntax

/* <color> values */ border-left-color: red; border-left-color: #ffbb00; border-left-color: rgb(255, 0, 0); border-left-color: hsla(100%, 50%, 25%, 0.75); border-left-color: currentcolor; border-left-color: transparent;  /* Global values */ border-left-color: inherit; border-left-color: initial; border-left-color: revert; border-left-color: unset; 

The border-left-color property is specified as a single value.

Values

<color>

The color of the left border.

Formal definition

Initial value	currentcolor
Applies to	all elements. It also applies to ::first-letter.
Inherited	no
Computed value	computed color
Animation type	a color

Formal syntax

<color>
where <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hwb()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
where <rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )<hwb()> = hwb( [<hue> | none] [<percentage> | none] [<percentage> | none] [ / [<alpha-value> | none] ]? )
where <alpha-value> = <number> | <percentage><hue> = <number> | <angle>

Examples

A simple div with a border

HTML

<div class="mybox">   <p>This is a box with a border around it.      Note which side of the box is      <span class="redtext">red</span>.</p> </div> 

CSS

.mybox {     border: solid 0.3em gold;     border-left-color: red;     width: auto; }  .redtext {     color: red; } 

Result

Specifications

Specification
CSS Backgrounds and Borders Module Level 4 # border-color

See also

The border-related CSS shorthand properties: border, border-left, and border-color. The color-related CSS properties for the other borders: border-right-color, border-bottom-color, and border-top-color. The other border-related CSS properties applying to the same border: border-left-style and border-left-width.

Last modified: Aug 12, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語한국어PolskiPortuguês (do Brasil)中文 (简体) Change language