border vs outline
border 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.
Comparaison point par point
#Affecte la taille de l’élément
Peut styliser chaque côté séparément
Arrondi via border-radius
Décalage par rapport à l’élément
Utilisation par défaut du navigateur
Utilisation typique
Exemple
#.card {
border: 2px solid #3f3f46;
}
.card:focus-visible {
outline: 3px solid #a78bfa;
outline-offset: 3px;
}<div class="stage">
<button class="card" type="button" style="padding: 10px 16px; border-radius: 10px; background: #18181b; color: #fff;">Cliquez ou appuyez sur Tab</button>
</div>Définition et utilisation
#La propriété border fait pleinement partie du modèle de boîte. Elle s’ajoute à la taille de l’élément, sauf si vous activez box-sizing: border-box, et vous pouvez styliser chaque côté séparément avec border-top, border-right, etc. L’arrondi des coins via border-radius concerne justement la bordure.
outline se dessine à l’extérieur de la bordure et n’affecte jamais la taille ni la mise en page des éléments voisins. Impossible de la styliser côté par côté : c’est toujours un seul rectangle autour de l’élément entier. Les navigateurs modernes l’arrondissent avec border-radius, et outline-offset permet de l’écarter du bord.
Par défaut, les navigateurs utilisent outline pour montrer le focus clavier, ce qui en fait un choix naturel pour vos propres indicateurs de focus et pour déboguer une mise en page, car elle ne déplace jamais le contenu. Réservez border aux cadres visibles des cartes, des champs et des boutons qui font partie du design.
Syntaxe
#border: <épaisseur> <style> <couleur>;
outline: <épaisseur> <style> <couleur>;Plus d’exemples
#.box-outline { outline: 6px solid #f59e0b; }<div class="stage" style="display: flex; gap: 8px;">
<div class="box">1</div>
<div class="box box-outline">2</div>
<div class="box">3</div>
</div>Malgré l’épais contour, les éléments 1 et 3 restent à la même place que sans lui.
.box-border { border: 6px solid #f59e0b; }<div class="stage" style="display: flex; gap: 8px;">
<div class="box">1</div>
<div class="box box-border">2</div>
<div class="box">3</div>
</div>Ce même élément, avec une bordure de la même épaisseur, repousse ses voisins 1 et 3 pour se faire de la place.
Bonnes pratiques
#- Pour l’indicateur de focus clavier, utilisez
outline, de préférence avec:focus-visible, pour ne pas déplacer la mise en page. - Si vous avez besoin d’une épaisseur de bordure différente sur un seul côté, ce doit être
border. Outline n’est qu’un seul rectangle. outline-offsetécarte le contour de l’élément sans changer sa taille.
Entrées associées
#- borderRaccourci qui définit l’épaisseur, le style et la couleur d’une bordure.
- outlineDessine un contour autour d’un élément, sans qu’il occupe de place dans la mise en page.
- :focus-visibleCorrespond à un élément ayant le focus seulement quand le navigateur juge que l’indicateur doit être visible, par exemple lors d’une navigation au clavier.
- 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.