outline-color

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 | WindowText
où 
<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.

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.