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 différence de la bordure, le contour est tracé en dehors du cadre de l'élément et peut donc chevaucher d'autres contenus. La bordure, en revanche, modifiera la disposition de la page afin de s'assurer qu'aucun chevauchement involontaire ne se produit.

La propriété outline-color est également synthétisée avec la propriété raccourcie outline.

/* Valeurs avec un mot-clé */
outline-color: invert;

/* Valeurs de couleur */
/* Type <color>       */
outline-color: red;
outline-color: #f92525;
outline-color: rgb(30,222,121);

/* Valeurs globales */
outline-color: inherit;
outline-color: initial;
outline-color: unset;

Valeur initialeinvert, pour les navigateurs le supportant, currentColor pour les autres
Applicabilitétous les éléments
Héritéenon
Médiapour chaque propriété individuelle de la propriété raccourcie :
  • visual: Valeur introuvable dans la base de données
  • interactive: Valeur introuvable dans la base de données
Valeur calculéePour 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 à rgba(0,0,0,0).
Type d'animationune couleur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Syntaxe

La propriété outline-color est définie avec une des valeurs listées ci-après.

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> | invert


<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>


<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>? )


<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

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

Accessibilité

L'utilisation d'un focus personnalisé s'accompagne généralement d'une modification de la propriété outline. Si la couleur du contour est modifiée, il est nécessaire de vérifier que le contraste entre le contour et l'arrière-plan est suffisant afin que le contour puisse clairement être distingué.

Le ratio de contraste est déterminé en comparaisant les luminosités des deux couleurs. Pour le contraste entre un texte et son arrière-plan, les recommandations Web Content Accessibility Guidelines (WCAG) requièrent un ratio de 4.5:1 pour le contenu textuel et un ratio de 3:1 pour les titres ou les textes plus grands (18.66px et en gras ou 24px ou plus grand).

Spécifications

Spécification Statut Commentaires
CSS Basic User Interface Module Level 3
La définition de 'outline-color' dans cette spécification.
Recommendation 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

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5
Support complet 1.5
Aucun support 1 — 3.6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 8Opera Support complet 7Safari Support complet 1.2WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
invertChrome Aucun support NonEdge ? Firefox Aucun support ? — 3IE Support complet 8Opera Aucun support 7 — 15Safari Aucun support NonWebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android Aucun support Non

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, fscholz, Sebastianz, teoli, FredB, Kyodev, Fredchat
Dernière mise à jour par : SphinxKnight,