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 raccourcies border-color et/ou border-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 class="default-example" id="default-example">
<div class="transition-all" id="example-element">
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 | une couleur |
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 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
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # border-color |
Compatibilité des navigateurs
Chargement…
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 :