La propriété CSS outline-color

La propriété CSS outline-color définit la couleur du contour d'un élément — la ligne tracée juste à l'extérieur du bord.

Un contour est similaire à une bordure, mais avec deux différences importantes :

Il ne prend pas de place. La largeur et la hauteur d'un élément n'incluent pas le contour, donc ajouter ou modifier un contour ne déplace jamais la mise en page environnante (contrairement à une bordure, qui fait partie du modèle de boîte).
Il ne peut pas avoir de côtés individuels. Un contour entoure l'élément entier en une seule fois ; vous ne pouvez pas définir une couleur différente uniquement en haut ou à gauche, comme vous pouvez le faire avec border-color.

Parce que les contours se situent à l'extérieur de la boîte et ne reformatent pas la page, ils constituent la méthode standard pour indiquer le focus clavier. Lorsqu'un utilisateur navigue à l'aide de la touche Tab entre les liens, boutons et champs de formulaire, le navigateur dessine un contour de focus pour qu'il puisse voir où il se trouve. Cela fait de outline-color avant tout un outil d'accessibilité, et seulement ensuite un outil décoratif — soyez prudent avant de supprimer ou de masquer les contours de focus.

Pourquoi utiliser outline-color

Vous utiliserez outline-color principalement pour :

Styliser les états de focus — donner à :focus ou :focus-visible une couleur de contour à fort contraste et conforme à votre charte graphique plutôt que la couleur par défaut du navigateur.
Mettre en évidence un élément sans modifier sa taille ni déplacer ses voisins.
Déboguer la mise en page — un contour lumineux temporaire montre l'étendue exacte d'un élément sans affecter le modèle de boîte.

Info

outline-color n'a aucun effet visible par elle-même. Un contour ne s'affiche que s'il possède également un style, donc associez-la au raccourci outline ou à la propriété outline-style (dont la valeur par défaut est none).

Valeurs de couleur acceptées

Vous pouvez définir la couleur du contour avec n'importe quelle couleur CSS standard : un nom de couleur (red), un code hexadécimal (#1c87c9), ou les notations fonctionnelles rgb(), rgba(), hsl(), et hsla(). Le mot-clé currentColor est également pratique — il fait correspondre le contour à la couleur du texte de l'élément. Pour la liste complète des formats de couleur, consultez la section couleurs HTML.

Valeur initiale	invert
S'applique à	Tous les éléments.
Hérité	Non.
Animable	Oui. La couleur est animable.
Version	CSS2
Syntaxe DOM	object.style.outlineColor = "#8ebf42";

Syntaxe

Syntaxe CSS de outline-color

outline-color: invert | color | initial | inherit;

Exemple de la propriété outline-color :

Exemple de code CSS outline-color

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        border: 3px solid #ccc;
        outline-style: double;
        outline-color: invert;
      }
    </style>
  </head>
  <body>
    <h2>Outline-color property example</h2>
    <p>Invert default value is applied.</p>
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété outline-color avec des couleurs hexadécimales, RGB, RGBA, HSL, HSLA :

Exemple CSS outline-color avec toutes les valeurs

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .p1 {
        outline-style: solid;
        outline-color: #1c87c9;
      }
      .p2 {
        outline-style: solid;
        outline-color: hsl(65, 100%, 50%);
      }
      .p3 {
        outline-style: solid;
        outline-color: hsla(84, 49%, 50%, 1);
      }
      .p4 {
        outline-style: solid;
        outline-color: rgb( 224, 0, 0);
      }
      .p5 {
        outline-style: solid;
        outline-color: rgba(204, 204, 204, 1);
      }
    </style>
  </head>
  <body>
    <h2>Outline-color property example</h2>
    <p class="p1">This is a paragraph with hexadecimal blue outline.</p>
    <p class="p2">This is a paragraph with hsl yellow outline.</p>
    <p class="p3">This is a paragraph with hsla green outline.</p>
    <p class="p4">This is a paragraph with rgb red outline.</p>
    <p class="p5">This is a paragraph with rgba grey outline.</p>
  </body>
</html>

Essayez vous-même »

Chaque paragraphe conserve une mise en page identique aux autres — seule la couleur du contour change — car le contour se trouve à l'extérieur de la boîte et n'ajoute ni largeur ni hauteur.

Exemple de mise en style d'un contour de focus :

L'utilisation la plus courante de outline-color en situation réelle est de rendre le focus clavier visible et conforme à la charte graphique. Ici, un lien reçoit un contour de focus bleu épais au lieu de la valeur par défaut du navigateur :

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      a:focus-visible {
        outline-style: solid;
        outline-width: 3px;
        outline-color: #1c87c9;
        outline-offset: 2px;
      }
    </style>
  </head>
  <body>
    <h2>Focus outline example</h2>
    <p>Press <kbd>Tab</kbd> to move focus to the link below:</p>
    <a href="#">Focus me with the keyboard</a>
  </body>
</html>

La propriété outline-offset éloigne le contour de quelques pixels de l'élément pour qu'il ne touche pas le texte. Utilisez :focus-visible plutôt que :focus pour que le contour apparaisse pour les utilisateurs du clavier mais pas lors des clics de souris.

Avertissement

Évitez outline: none ou outline-color: transparent sur les éléments pouvant recevoir le focus, à moins de remplacer l'indicateur de focus par quelque chose d'aussi visible. Le supprimer rend la page inutilisable pour les utilisateurs qui ne se servent que du clavier.

Valeurs

Valeur	Description	Essayer
invert	Inverse toute couleur appliquée à l'arrière-plan. Cette valeur garantit la visibilité du contour quelle que soit la couleur d'arrière-plan. Il s'agit de la valeur par défaut de cette propriété.	Essayer »
color	Définit la couleur du contour. Les noms de couleur, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla(), ou le mot-clé `currentColor` peuvent être utilisés.	Essayer »
initial	Rétablit la valeur par défaut de la propriété.	Essayer »
inherit	Hérite de la valeur de la propriété de son élément parent.

Propriétés associées

outline-color est l'une des trois propriétés détaillées qui composent le raccourci outline :

outline-style — définit le style de ligne (solid, dashed, double, …). Obligatoire pour que le contour s'affiche.
outline-width — définit l'épaisseur de la ligne.
outline-offset — définit l'écart entre le contour et le bord de la bordure.

Écrire outline: 3px solid #1c87c9; est un raccourci pour définir simultanément la largeur, le style et la couleur.

Exercice

Pratique

Qu'est-ce qui est vrai à propos de la propriété outline-color en CSS ?

La propriété outline-color en CSS est utilisée pour définir la couleur d'un contour.La couleur du contour peut être définie dans tous les types de CSS.Il n'est possible de définir la couleur du contour qu'en CSS3.Vous pouvez utiliser une variété de valeurs de couleur comme RGB, HEX, HSL et même des noms de couleur.La valeur par défaut de la propriété outline-color en CSS est 'invert'.La couleur du contour est toujours solide et ne peut pas utiliser de dégradé de couleur.