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é CSS border-left-color permet de définir la couleur de la bordure à gauche d'un élément. Elle peut aussi être définie avec les propriétés raccourcies CSS border-color 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">
Ceci est une boîte avec une bordure autour.
</div>
</section>
#example-element {
background-color: #eeeeee;
color: black;
border: 0.75em solid;
padding: 0.75em;
width: 80%;
height: 100px;
}
Syntaxe
css
/* Valeurs de type <color> */
border-left-color: red;
border-left-color: #ffbb00;
border-left-color: rgb(255 0 0);
border-left-color: hsl(100deg 50% 25% / 75%);
border-left-color: currentColor;
border-left-color: transparent;
/* Valeurs globales */
border-left-color: inherit;
border-left-color: initial;
border-left-color: revert;
border-left-color: revert-layer;
border-left-color: unset;
La propriété border-left-color se définit avec une seule valeur.
Valeurs
<color>-
La couleur de la bordure gauche.
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
>Une div avec une bordure
HTML
html
<div class="ma-boite">
<p>
Une boîte avec une bordure autour. Notez le côté de la boîte qui est
<span class="texte-rouge">rouge</span>.
</p>
</div>
CSS
css
.ma-boite {
border: solid 0.3em gold;
border-left-color: red;
width: auto;
}
.texte-rouge {
color: red;
}
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 :
border,border-leftetborder-color. - Les propriétés de couleur pour les autres bordures :
border-right-color,border-bottom-coloretborder-top-color. - Les autres propriétés liées à la même bordure :
border-left-styleetborder-left-width. - La valeur de couleur par défaut
currentColor.