outline
Dessine un contour autour d’un élément, sans qu’il occupe de place dans la mise en page.
- Valeur initiale
medium none auto- Héritée
- Non
- Animable
- oui, l’épaisseur et la couleur
- S’applique à
- tous les éléments
- JavaScript
element.style.outline = "2px solid #a78bfa"
Exemple
#.button:focus-visible {
outline: 2px solid #a78bfa;
outline-offset: 3px;
}<style>.button:focus-visible { outline: 2px solid #a78bfa; outline-offset: 3px; }</style>
<p>Cliquez dans l’aperçu et appuyez sur Tab :</p>
<button class="button" type="button" style="padding: 8px 16px; border-radius: 8px;">Enregistrer</button>
<button class="button" type="button" style="padding: 8px 16px; border-radius: 8px;">Annuler</button>Définition et utilisation
#La propriété outline est un raccourci pour outline-width, outline-style et outline-color. Un contour ressemble à une bordure, mais il est dessiné à l’extérieur et n’affecte ni la taille ni la position des éléments.
Les navigateurs l’utilisent pour montrer le focus clavier. Grâce à cela, les personnes qui naviguent avec la touche Tab voient où elles se trouvent. La supprimer sans remplacement (outline: none) est l’une des erreurs d’accessibilité les plus fréquentes.
Vous réglez l’écart entre le contour et l’élément avec outline-offset. Les navigateurs modernes dessinent aussi le contour en suivant l’arrondi de border-radius.
Syntaxe
#outline: <épaisseur> || <style> || <couleur>;Valeurs
#- Aucun contour.
- Un contour violet tout contre l’élément.
avec un écart
Un contour décalé de 4px par rapport au bord.- Un contour en tirets.
Valeurs en pratique
#none
.demo { outline: none; }2px solid #a78bfa
.demo { outline: 2px solid #a78bfa; }+ outline-offset
.demo { outline: 2px solid #a78bfa; outline-offset: 4px; }3px dashed #f59e0b
.demo { outline: 3px dashed #f59e0b; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Plutôt que de supprimer le contour, utilisez
:focus-visible. Il n’apparaîtra qu’en navigation au clavier, pas après un clic de souris. - Le contour ne change pas la mise en page, il est donc idéal pour mettre en évidence des éléments pendant le débogage.
Entrées associées
#- border vs outlineborder fait partie du modèle de boîte et agrandit l’élément, alors que outline dessine un contour à l’extérieur, sans effet sur la mise en page ni la taille.
- borderRaccourci qui définit l’épaisseur, le style et la couleur d’une bordure.
- border-radiusArrondit les coins d’un élément.
- outline-offsetÉloigne le contour du bord de l’élément, ou le ramène vers l’intérieur, sans modifier la mise en page.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.