border-bottom-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-bottom-color définit la couleur de la bordure inférieure d'un élément. Elle peut aussi être définie avec les propriétés raccourcies CSS border-color ou border-bottom.
Exemple interactif
border-bottom-color: red;
border-bottom-color: #32a1ce;
border-bottom-color: rgb(170 50 220 / 0.6);
border-bottom-color: hsl(60 90% 50% / 0.8);
border-bottom-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-bottom-color: red;
border-bottom-color: #ffbb00;
border-bottom-color: rgb(255 0 0);
border-bottom-color: hsl(100deg 50% 25% / 75%);
border-bottom-color: currentColor;
border-bottom-color: transparent;
/* Valeurs globales */
border-bottom-color: inherit;
border-bottom-color: initial;
border-bottom-color: revert;
border-bottom-color: revert-layer;
border-bottom-color: unset;
La propriété border-bottom-color est définie avec une seule valeur.
Valeurs
<color>-
La couleur de la bordure inférieure.
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-bottom-color =
<color> |
<image-1D>
<image-1D> =
<stripes()>
<stripes()> =
stripes( <color-stripe># )
<color-stripe> =
<color> &&
[ <length-percentage> | <flex> ]?
<length-percentage> =
<length> |
<percentage>
Exemples
Un 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-bottom-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 CSS liées aux bordures :
border,border-bottometborder-color. - Les propriétés CSS de couleur pour les autres bordures :
border-right-color,border-top-coloretborder-left-color. - Les autres propriétés CSS liées à la même bordure :
border-bottom-styleetborder-bottom-width. - La valeur de couleur par défaut
currentColor.