border-left-color
Quick Summary for border-left-color
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.
Code Usage for border-left-color
/* <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; More Details for border-left-color
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> .mybox { border: solid 0.3em gold; border-left-color: red; width: auto; } .redtext { color: red; } 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
