La propriété border-left-color permet de définir la couleur utilisée pour la bordure gauche d'un élément. Pour avoir une formulation plus concise, on pourra utiliser les propriétés raccourcies border-color et/ou border-left.

Syntaxe

/* Valeurs de type <color> */
border-left-color: red;
border-left-color: rgb(255, 128, 0);
border-left-color: hsla(100%, 50%, 25%, 0.75);
border-left-color: #ffbb00;
border-left-color: currentColor;
border-left-color: transparent;

/* Valeurs globales */
border-left-color: inherit;
border-left-color: initial;
border-left-color: unset;

Valeurs

<color>
Une valeur de couleur (type <color>) qui décrit la couleur utilisée pour la bordure du côté gauche.

Syntaxe formelle

<color>


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


<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>? )


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Exemples

CSS

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

.texterouge {
  color: red;
}

HTML

<div class="maboite">
  <p>Une boîte avec une bordure autour.
     Notez le côté de la boîte qui est
     <span class="texterouge">rouge</span>.</p>
</div>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-color' dans cette spécification.
Candidat au statut de recommandation Pas de modification significative, la valeur transparent a été supprimée car elle fait désormais partie du type <color> qui a été étendu.
CSS Level 2 (Revision 1)
La définition de 'border-left-color' dans cette spécification.
Recommendation Définition initiale.

Valeur initialecurrentcolor
Applicabilitétous les éléments. S'applique aussi à ::first-letter.
Héritéenon
Médiavisuel
Valeur calculéecouleur calculée
Type d'animationune couleur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1
Notes
Support complet 1
Notes
Notes Firefox also supports the non-standard -moz-border-left-colors CSS property that sets the bottom border to multiple colors.
IE Support complet 4Opera Support complet 3.5Safari Support complet 1WebView Android Support complet 1Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4
Notes
Support complet 4
Notes
Notes Firefox also supports the non-standard -moz-border-left-colors CSS property that sets the bottom border to multiple colors.
Opera Android Support complet 11Safari iOS Support complet 1Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, teoli, FredB, Yuichiro, Mgjbot, Fredchat
Dernière mise à jour par : SphinxKnight,