Propriété CSS outline

Un outline est un trait dessiné autour d'un élément, juste à l'extérieur de son bord. Contrairement à une bordure, un outline ne prend pas de place dans la mise en page et est identique sur les quatre côtés — il n'est pas possible de le définir côté par côté. Cette page présente le raccourci outline, ses différences avec une bordure, et son importance pour l'accessibilité au clavier.

La propriété outline est un raccourci qui définit ces propriétés détaillées en une seule déclaration :

outline-width — l'épaisseur du trait.
outline-style — le style du trait (solid, dashed, dotted, …). Requis pour que le contour apparaisse.
outline-color — la couleur du trait.
outline-offset — l'espace entre le contour et le bord de la bordure. (Défini séparément ; il ne fait pas partie du raccourci outline.)

Le style d'outline par défaut est none, donc définir uniquement outline-color ne produit aucun effet — vous devez également spécifier un style. Comme les contours sont peints à l'extérieur de l'élément et ignorés par le modèle de boîte, ils ne déplacent jamais le contenu environnant et ne modifient pas les dimensions de mise en page de l'élément.

Outlines vs. Bordures

Un outline et une bordure se ressemblent, mais ils se comportent différemment :

Mise en page : une bordure fait partie du modèle de boîte et repousse le contenu voisin ; un outline est peint par-dessus et ne prend aucune place.
Côtés : les bordures peuvent être stylisées par côté (border-top, border-left, …) ; un outline est toujours uniforme sur les quatre côtés.
Forme : dans la plupart des navigateurs, un outline est strictement rectangulaire et n'est pas arrondi par border-radius, même lorsque la bordure l'est.
Position : l'outline est dessiné à l'extérieur du bord de la bordure ; ainsi, lorsqu'un élément possède les deux, l'outline se situe au-delà de la bordure.

Valeur initiale	medium none currentcolor
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Hérité	Non.
Animatable	Oui. Le contour de l'élément est animatable.
Version	CSS2
Syntaxe DOM	object.style.outline = "#eee dashed 10px";

Syntaxe

CSS outline

outline: outline-width | outline-style | outline-color | outline-offset | initial | inherit;

Exemple de la propriété outline :

Exemple de code CSS outline

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p.dotted {
        outline: dotted;
      }
      p.dashed {
        outline: dashed;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <p class="dotted">Lorem Ipsum is simply dummy text of the printing... </p>
    <p class="dashed">Lorem Ipsum is simply dummy text of the printing...</p>
  </body>
</html>

Essayez vous-même »

Résultat

Dans l'exemple ci-dessus, l'outline-style du premier élément est dotted et celui du second élément est dashed.

Dans l'exemple suivant, le premier élément n'a pas de bordure, le second en a une. Remarquez que l'outline du second élément se situe à l'extérieur de sa bordure :

Exemple de la propriété outline avec un élément ayant une bordure :

CSS outline et bordure ensemble, exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.ex1 {
        outline-style: solid;
        outline-width: thick;
      }
      div.ex2 {
        border: 1px solid #fc7f01;
        outline-style: solid;
        outline-width: thick;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <div class="ex1">Lorem Ipsum is simply dummy text of the printing...</div>
    <br />
    <div class="ex2">Lorem Ipsum is simply dummy text of the printing...</div>
  </body>
</html>

Essayez vous-même »

Dans l'exemple suivant, l'outline est à l'extérieur de la bordure du second élément.

Exemple de la propriété outline-color avec la propriété outline-style :

CSS outline, exemple de code couleur

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div.blue {
        outline-style: solid;
        outline-color: #1c87c9;
      }
      div.green {
        border: 1px solid black;
        outline-style: solid;
        outline-color: #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Outline property example</h2>
    <div class="blue">Lorem Ipsum is simply dummy text of the printing...</div>
    <br />
    <div class="green">Lorem Ipsum is simply dummy text of the printing...</div>
  </body>
</html>

Essayez vous-même »

Espacement de l'outline avec outline-offset

Par défaut, l'outline épouse le bord de la bordure. La propriété outline-offset l'en éloigne (ou, avec une valeur négative, le tire vers l'intérieur). Il s'agit d'une propriété distincte, non incluse dans le raccourci outline :

button {
  outline: 2px solid #1c87c9;
  outline-offset: 4px; /* 4px gap between the border and the outline */
}

Outlines et accessibilité au clavier

L'utilisation la plus importante des outlines en pratique est l'indicateur de focus. Lorsqu'un utilisateur navigue dans une page avec la touche Tab, le navigateur dessine un outline par défaut autour de l'élément focalisé pour indiquer où il se trouve. Le supprimer sans le remplacer constitue un sérieux problème d'accessibilité :

/* Do NOT do this — keyboard users lose track of focus */
button:focus {
  outline: none;
}

Si le contour de focus par défaut ne convient pas à votre design, modifiez son style plutôt que de le supprimer :

button:focus-visible {
  outline: 2px solid #1c87c9;
  outline-offset: 2px;
}

Ceci utilise l'état :focus conjointement avec la pseudo-classe moderne :focus-visible, qui affiche l'outline uniquement lors d'une interaction au clavier — les clics de souris ne déclenchent donc pas de contour, tandis que les utilisateurs du clavier restent bien orientés.

Valeurs

Valeur	Description
outline-width	Définit la largeur du contour.
outline-style	Définit le style du contour.
outline-color	Définit la couleur du contour.
outline-offset	Décale le contour par rapport au bord de la bordure.
initial	Fait utiliser à la propriété sa valeur par défaut.
inherit	Hérite la propriété de l'élément parent.

Propriétés associées

outline-style — le composant de style requis du raccourci.
outline-width — contrôle l'épaisseur du contour.
outline-color — contrôle la couleur du contour.
outline-offset — espace le contour par rapport à la bordure.
border — l'équivalent dans le modèle de boîte qui affecte la mise en page.

Entraînement

Pratique

Qu'est-ce qui est vrai concernant la propriété CSS Outline ?

Elle permet de dessiner un trait autour du bord externe des éléments.Un outline ne fait pas partie du modèle de boîte.L'outline ne change pas la taille ni la forme des éléments.La propriété Outline permet de rendre les éléments redimensionnables.Un outline est toujours positionné à l'intérieur de la bordure d'un élément.