Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
border-left-color
Baseline Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
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 raccourciesborder-color et/ouborder-left.
Exemple interactif
border-left-color: red;border-left-color: #32a1ce;border-left-color: rgb(170, 50, 220, 0.6);border-left-color: hsl(60, 90%, 50%, 0.8);border-left-color: transparent;<section> <div> This is a box with a border around it. </div></section>#example-element { background-color: #eee; color: #000; border: 0.75em solid; padding: 0.75em; width: 80%; height: 100px;}Syntaxe
css
/* 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
Définition formelle
| Valeur initiale | currentcolor |
|---|---|
| Applicabilité | tous les éléments. S'applique aussi à::first-letter. |
| Héritée | non |
| Valeur calculée | couleur calculée |
| Type d'animation | unecouleur |
Syntaxe formelle
border-left-color =
<color>|
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes(<color-stripe>#)
<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?
<length-percentage> =
<length>|
<percentage>
Exemples
CSS
css
.maboite { border: solid 0.3em gold; border-left-color: red; width: auto;}.texterouge { color: red;}HTML
html
<div> <p> Une boîte avec une bordure autour. Notez le côté de la boîte qui est <span>rouge</span>. </p></div>Résultat
Spécifications
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-color |
Compatibilité des navigateurs
Voir aussi
Les propriétés raccourcies liées aux bordures
Les propriétés de couleur pour les autres bordures :
Les autres propriétés liées à la bordure gauche :