Outline en CSS
Vous savez déjà tracer une bordure (border). Outline est un outil voisin avec un autre rôle : il dessine un anneau à l’extérieur de la boîte de bordure et — contrairement à border — n’occupe pas d’espace de mise en page. Les voisins ne bougent pas quand vous ajoutez un outline.
Outline versus border
Gardez ces deux outils séparés sur votre carte mentale.
📊 Outline vs border
| Caractéristique | Outline | Border |
|---|---|---|
| Espace de mise en page | N’occupe pas d’espace ; la taille de la boîte reste égale | Occupe de l’espace ; peut agrandir la boîte de bordure |
| Place habituelle | À l’extérieur du bord | Autour du padding |
| Dans le calcul de taille du modèle de boîte | Non | Oui (avec content-box par défaut) |
Un outline simple
Style, épaisseur et couleur fonctionnent beaucoup comme border — mais l’anneau se place à l’extérieur.
Outline de base
css.note {
border: 1px solid #94a3b8;
outline: 3px solid #0ea5e9;
padding: 1rem;
background-color: #f8fafc;
}Raccourci outline
Le trio familier : épaisseur, style et couleur. Un style est requis pour que l’outline apparaisse — outline: 2px #000 seul ne suffit pas.
Raccourci outline
css.card {
outline: 2px dashed #7c3aed;
padding: 1.25rem;
background-color: #f5f3ff;
}Styles d’outline courants
Solid, dashed et dotted sont des choix du quotidien. outline: none retire l’anneau — à utiliser avec prudence (voir le focus ci-dessous).
Exemples de styles outline
css.solid-ring { outline: 3px solid #059669; }
.dash-ring { outline: 3px dashed #d97706; }
.dot-ring { outline: 3px dotted #dc2626; }outline-offset — pousser l’anneau vers l’extérieur
outline-offset éloigne l’outline du bord sans changer la taille de mise en page. Les valeurs positives poussent vers l’extérieur ; les négatives tirent vers l’intérieur.
Outline avec offset
css.badge {
border: 2px solid #0f766e;
outline: 2px solid #14b8a6;
outline-offset: 6px;
padding: 0.5rem 0.75rem;
background-color: #ecfdf5;
}Même aspect, coût de mise en page différent
Deux boîtes peuvent se ressembler, mais seule la border change combien de place l’élément occupe.
La border grandit ; l’outline non
css.with-border {
width: 180px;
border: 8px solid #b45309;
background-color: #fef3c7;
}
.with-outline {
width: 180px;
border: 1px solid #cbd5e1;
outline: 8px solid #b45309;
background-color: #fef3c7;
}
/* Les deux paraissent forts ; .with-border occupe plus de largeur de mise en page */Habitude favorable au focus
Les navigateurs utilisent souvent outline (ou un anneau similaire) pour le focus clavier. Ne mettez pas outline: none partout. Si vous restylez le focus, fournissez un anneau de remplacement clair pour que les utilisateurs clavier voient où ils sont.
Garder un anneau de focus visible
css.button:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}À vous d’essayer
- Donnez à une boîte rembourrée un
borderet unoutlineplus épais — les voisins restent. - Alternez le style d’outline entre
solid,dashedetdotted. - Ajoutez
outline-offset: 8pxet regardez l’anneau flotter vers l’extérieur. - Comparez
.with-borderet.with-outlinecôte à côte — poids visuel semblable, largeur de mise en page différente. - Stylez
:focus-visiblesur un bouton plutôt que de retirer les outlines globalement.
Erreurs fréquentes
- Traiter l’outline comme une border pour calculer la largeur de mise en page (l’outline n’ajoute pas de taille)
- Mettre
outline: nonesur tous les éléments sans remplacement de focus - S’attendre à ce que l’outline éloigne les voisins (c’est le rôle de margin ou border)
- Écrire épaisseur et couleur sans style (
solid/dashed/ …) - Confondre outline avec les couches du modèle de boîte que vous venez d’apprendre
Résumé
- L’outline se dessine hors de la border et n’occupe pas d’espace de mise en page
- Le raccourci utilise épaisseur, style et couleur — le style est requis
outline-offsetdéplace l’anneau sans changer la taille de la boîte- Border pour les bords permanents ; outline pour le focus et les anneaux temporaires
- Gardez un outline de focus visible (ou un remplacement équivalent) pour le clavier
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut