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-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éCSSborder-bottom-color définit la couleur de labordure inférieure d'un élément. Elle peut aussi être définie avec les propriétés raccourcies CSSborder-color ouborder-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> <div> 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 | unecouleur |
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> <p> Une boîte avec une bordure autour. Notez le côté de la boîte qui est <span>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.