Non standard
Cette fonctionnalité n'est ni standard, ni en voie de standardisation. Ne l'utilisez pas pour des sites accessibles sur le Web : elle ne fonctionnera pas pour tout utilisateur. Il peut également y avoir d'importantes incompatibilités entre les implémentations et son comportement peut être modifié dans le futur.
Pour les applications Mozilla, la propriété -moz-border-bottom-colors
définit une liste de couleurs à utiliser pour mettre en forme la bordure du côté bas.
/* Une couleur */ /* Type <color> */ -moz-border-bottom-colors: #f0f0f0; /* Plusieurs valeurs <color> */ -moz-border-bottom-colors: #f0f0f0 #a0a0a0 #505050 #000000; /* Valeurs globales */ -moz-border-bottom-colors: inherit; -moz-border-bottom-colors: initial; -moz-border-bottom-colors: unset;
Lorsque la bordure d'un élément est plus épaisse qu'un pixel CSS, chaque ligne de pixels utilisera une des couleurs indiquées (en allant de l'extérieur vers l'intérieur). Cela permet d'éviter l'utilisation de boîtes imbriquées. Si la bordure est plus large que le nombre de couleurs indiquées, la partie restante de la bordure sera peinte avec la couleur utilisée le plus à intérieur.
Valeur initiale | none |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Média | visuel |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Cette propriété n'est pas appliquée :
- Si
border-style
vautdashed
oudotted
. - Aux tableaux pour lesquels
border-collapse: collapse
.
Syntaxe
Valeurs
Cette propriété permet d'utiliser une liste de couleurs séparées par des blancs.
<color>
- Définit la couleur à utiliser pour une ligne de pixels de la bordure basse. La valeur
transparent
est valide. Voir<color>
pour les valeurs et unités possibles. none
- La valeur initiale de la propriété, aucune couleur n'est utilisée ou
border-color
est utilisée si elle est définie.
Syntaxe formelle
<color>+ | noneoù
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )où
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Exemples
CSS
#exemple { padding: 20px; background-color: gray; border: 10px solid black; -moz-border-top-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; -moz-border-right-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-bottom-colors: red #f60 #f80 #f90 #fa0 #fb0 #fc0 #fd0 #fe0 #ff0; -moz-border-left-colors: #e00 #c30 #c50 #c60 #c70 #c80 #c90 #ca0 #cb0 #cc0; }
HTML
<div id="exemple">Exemple</div>
Résultat
Spécifications
Cette propriété est une propriété propriétaire liée à Mozilla/Gecko et ne fait partie d'aucune spécification.
Compatibilité des navigateurs
Ordinateur | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Support simple | Chrome Aucun support Non | Edge Aucun support Non | Firefox
Aucun support
1 — 59
| IE Aucun support Non | Opera Aucun support Non | Safari Aucun support Non | WebView Android Aucun support Non | Chrome Android Aucun support Non | Edge Mobile Aucun support Non | Firefox Android
Aucun support
4 — 59
| Opera Android Aucun support Non | Safari iOS Aucun support Non | Samsung Internet Android Aucun support Non |
Légende
- Aucun support
- Aucun support
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Fonctionnalité non-standard. Celle-ci peut être incorrectement supportée par les autres navigateurs.
- Voir les notes d'implémentation.
- Voir les notes d'implémentation.