Appuyez sur la touche Tab en parcourant n'importe quel site bien construit : un contour, souvent bleu, se déplace d'un élément interactif à l'autre. Ce contour, c'est outline, la propriété la plus mal comprise du modèle de boîte, souvent retirée pour des raisons purement esthétiques sans que personne ne pense à ce qu'elle protège.
outline ressemble à border au premier regard, avec une syntaxe presque identique, mais son comportement diverge sur des points précis qui ont chacun leur importance pratique.
Définition
outline dessine un contour autour d'un élément, comme border, mais sans jamais faire partie du Modèle de boîte : il ne prend aucune place, ne pousse aucun élément voisin, et peut se dessiner par-dessus le contenu environnant sans décaler quoi que ce soit.
button:focus-visible {
outline: 3px solid #2563eb;
}Cette règle affiche un contour bleu de trois pixels uniquement quand le bouton reçoit le focus par un moyen qui le justifie, typiquement la navigation au clavier, jamais un simple clic de souris.
outline face à border : ce qui change vraiment
border | outline | |
|---|---|---|
| Occupe un espace dans la boîte | Oui | Non |
| Réglable côté par côté | Oui | Non, toujours les quatre côtés ensemble |
| Peut avoir un décalage vers l'extérieur | Non | Oui, avec outline-offset |
Suit précisément border-radius | Oui | Variable selon le navigateur |
L'absence de réglage par côté est souvent oubliée : impossible d'avoir un outline uniquement à gauche, contrairement à border-left. Si un contour partiel est nécessaire, border ou box-shadow restent les seules options.
outline-offset : écarter le contour de la boîte
outline-offset ajoute un espace entre le bord de l'élément et son contour, positif pour l'écarter vers l'extérieur, négatif pour le ramener à l'intérieur, par-dessus l'élément lui-même.
a:focus-visible {
outline: 2px solid #2563eb;
outline-offset: 4px;
}Ces quatre pixels de décalage évitent que le contour ne touche directement le texte d'un lien, un détail qui rend le focus nettement plus lisible sans changer la couleur ni l'épaisseur du trait.
Le piège de outline: none
Retirer le contour de focus sans le remplacer par autre chose supprime le seul signal visuel dont dispose une personne qui navigue au clavier pour savoir où elle se trouve sur la page. Sans lui, impossible de deviner quel lien ou quel bouton va réagir à la touche Entrée.
outline: none a longtemps été utilisé pour retirer le contour bleu jugé disgracieux par défaut du navigateur, sans jamais le remplacer. C'est l'une des régressions d'accessibilité les plus fréquentes du web, encore présente sur des sites récents. La bonne pratique consiste à styliser le contour avec ses propres couleurs plutôt qu'à le supprimer, et à s'appuyer sur :focus-visible pour ne l'afficher qu'à la navigation clavier.
Que faire si le style par défaut ne convient pas
Rien n'empêche de personnaliser complètement l'apparence du contour de focus, tant qu'un signal visible reste présent. outline-color, outline-width et outline-offset suffisent à l'adapter à une charte graphique.
Sur un élément déjà arrondi avec border-radius, où outline suit imparfaitement les coins selon les navigateurs, box-shadow constitue une alternative fiable : une ombre sans flou ni décalage, avec un spread positif, imite un contour qui épouse exactement la forme arrondie de l'élément.
Questions fréquentes
outline peut-il être arrondi comme border-radius ?
Les navigateurs récents en tiennent de plus en plus compte, mais le comportement reste inégal selon les moteurs de rendu. Pour un contour qui épouse à coup sûr des coins arrondis, box-shadow reste l'option la plus fiable.
Pourquoi le contour de focus apparaît-il seulement au clavier et pas à la souris ?
Grâce à la pseudo-classe :focus-visible, qui n'affiche le contour que lorsque le focus provient d'une interaction qui le justifie réellement, comme la touche Tab, contrairement à :focus qui l'affiche systématiquement, y compris après un simple clic de souris.
outline prend-il de la place comme border ?
Non, jamais : contrairement à border, outline ne fait pas partie du modèle de boîte et ne pousse donc aucun élément voisin, même avec une grande épaisseur ou un outline-offset important.