La propriété outline est surtout connue comme étant la propriété utilisée par les navigateurs afin de faire ressortir l'élément ayant le focus dans une page. Cette utilisation permet de naviguer via son clavier ⌨️ plutôt que la souris 🖱️.
Par exemple, appuyez sur la touche tab de votre clavier et remarquerez le cadre s'affichant autour de l'élément recevant le focus.
outline partage les mêmes sous-propriétés que border, soit:
outline-widthoutline-styleoutline-color
Et la même syntaxe courte. Par exemple:
outline: 2px solid green;Outline-offset
Il est aussi possible de créer un espace entre le cadrage et son élément en utilisant la propriété outline-offset.
Par exemple:
Différences avec border
Impact sur la dimension des éléments
La propriété border fait partie de l'élément. Elle génère donc un cadre à l'intérieur de celui-ci, affectant sa dimension et donc potentiellement son positionnement. Contrairement à outline, qui ne fait pas partie de l'élément et donc vit à l'extérieur de celui-ci.
Par exemple, les deux carrés verts 🟩 si dessous ont la même dimension et un cadre d'une même taille. Le premier utilise border et le deuxième outline. On remarque que le premier réduit la dimension à l'intérieur du carré, tandis que le deuxième la laisse indemne.
À gauche, border.
À droite, outline.
Le fait qu'outline n'affecte pas la dimension et le positionnement des éléments rend cette propriété particulièrement utile pour déboguer ou comprendre une mise en page.
Par exemple, dans l'inspecteur, dans le panneau des styles, cliquez sur le bouton ➕ afin de définir une nouvelle règle de styles et inscrivez * { outline: 2px solid red; } pour afficher un cadre rouge autour de tous les éléments de la page.