La propriété outline-color
permet de définir la couleur avec laquelle on trace le conteur de l'élément. Ce contour est tracé autour de la boîte de bordure et peut être utilisé pour faire ressortir l'élément. La propriété outline-color
est également synthétisée avec la propriété raccourcie outline
.
Valeur initiale | invert , pour les navigateurs le supportant, currentColor pour les autres |
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Média | visuel, interactif |
Valeur calculée | Pour le mot-clé invert , la valeur calculée est invert . Pour la valeur de la couleur, si la valeur est transparente, la valeur calculée sera la valeur rgba() correspondante. S'il n'y en a pas, ce sera la valeur rgb() correspondante. Le mot-clé transparent correspondra à rgb(0,0,0) . |
Animable | oui, comme une couleur |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Syntaxe
/* Valeurs avec un mot-clé */ outline-color: invert; /* Valeurs de couleur */ /* Type <color> */ outline-color: red; /* Valeurs globales */ outline-color: inherit; outline-color: initial; outline-color: unset;
Valeurs
<color>
- Voir la page
<color>
pour plus d'informations sur les valeurs utilisables avec ce type. invert
- Afin de s'assurer que la bordure est visible, on applique une inversion de couleur avec l'arrière-plan. Cela permet de renforcer le contraste, quelle que soit la couleur de l'arrière-plan. Cette valeur ne doit pas nécessairement être supportée par les navigateurs. Si elle ne l'est pas, ils considèreront la règle comme invalide.
Syntaxe formelle
<color> | invertoù
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
où
<rgb()> = rgb( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowTextoù
<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>
Exemples
HTML
<p class="exemple">Mon contour est blue, da ba dee.</p>
CSS
.exemple { /* Tout d'abord on utiliser outline */ /* pour définir le contour */ outline: 2px solid; /* Ensuite on précise sa couleur avec */ /* outline-color */ outline-color: #0000FF; }
Résultat
Spécifications
Spécification | Statut | Commentaires |
---|---|---|
CSS Basic User Interface Module Level 3 La définition de 'outline-color' dans cette spécification. |
Candidat au statut de recommandation | Aucun changement |
CSS Transitions La définition de 'outline-color' dans cette spécification. |
Version de travail | outline-color peut désormais être animée. |
CSS Level 2 (Revision 1) La définition de 'outline-color' dans cette spécification. |
Recommendation | Définition initiale. |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Support simple | 1.0 | 1.5 (1.8) [1] | 8.0 | 7.0 | 1.2 (125) |
invert |
Pas de support | Pas de support [2] | 8.0 | Pas de support[3] | Pas de support |
Fonctionnalité | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Support simple | ? | ? | ? | ? | ? |
[1] Dans les versions précédentes de Gecko (1.8), la propriété était préfixée : -moz-outline-color
.
[2] Le support a été abandonné avec la version 3.0 (1.9).
[3] Prise en charge avec Opera 7 mais abandonné à partir de Opera 15 avec le passage au moteur Blink/Chromium.