Contour - Astuces CSS | CSS Almanach 2025

La outlinepropriété en CSS trace une ligne autour de l'extérieur d'un élément. C'est similaire à border sauf que:

Il fait toujours le tour de tous les côtés, vous ne pouvez pas spécifier de côtés particuliers
Cela ne fait pas partie du modèle de boîte, donc cela n'affectera pas la position de l'élément ou des éléments adjacents (bien pour le débogage!)

D'autres faits mineurs incluent qu'il ne respecte pas le rayon de la frontière (cela a du sens je suppose car ce n'est pas une frontière) et qu'il n'est pas toujours rectangulaire. Si le contour contourne un élément en ligne avec des tailles de police différentes, par exemple, Opera dessinera une boîte en quinconce autour de tout.

Il est souvent utilisé pour des raisons d'accessibilité, pour mettre en valeur un lien lorsqu'il est tabulé sans affecter le positionnement et d'une manière différente du survol.

a:focus ( outline: 1px dashed red; )

Sténographie

outline: ( || || ) | inherit

Il prend les mêmes propriétés que border, mais avec «contour-» à la place.

Le raccourci ci-dessus aurait pu être écrit:

a:focus ( outline-width: 1px; outline-style: dashed; outline-color: red; )

Remarques

Vous ne pouvez pas définir un contour sur un seul (ou deux ou trois) côtés d'un élément. Tous les côtés seulement. Il n'y a pas une telle chose comme outline-top, outline-right, outline-bottomou outline-leftcomme il est avec border.
Essayez d'ouvrir la console sur n'importe quel site Web et de l'exécuter document.head.insertAdjacentHTML("beforeend", "* ( outline: 1px solid red; )");- vous verrez une grande partie de la structure des sites de cette façon.
outlineest utilisé :focuspar défaut pour les styles. N'oubliez pas que si vous supprimez des outlinestyles, par exemple a:focus ( outline: 0; ), vous devez les rajouter en utilisant un autre type de style visuellement distinct.