Un champ de formulaire, une carte, un bouton secondaire : la plupart des interfaces s'appuient sur border pour donner un contour net à leurs éléments. C'est une propriété simple en apparence, avec un piège classique qui touche presque tout le monde en débutant : une bordure invisible alors que sa largeur est bien définie.
border se combine étroitement avec le Modèle de boîte, puisqu'elle occupe un espace réel dans la boîte, et avec border-radius dès qu'il s'agit d'en arrondir les angles.
Définition
border est le raccourci qui regroupe trois propriétés en une seule déclaration : l'épaisseur du trait, son style, et sa couleur. Les trois doivent être présentes pour qu'une bordure s'affiche réellement.
.carte {
border: 1px solid #d1d5db;
}Cette ligne trace un trait plein d'un pixel, gris clair, sur les quatre côtés de l'élément. Retirer solid ne laisse rien à l'écran, même en conservant 1px : sans style de trait défini, border-style vaut none par défaut, et aucune largeur ne rend une bordure visible.
Les trois composantes du raccourci
| Propriété | Rôle | Valeur par défaut |
|---|---|---|
border-width | L'épaisseur du trait | medium, environ 3px |
border-style | La forme du trait : plein, pointillé... | none |
border-color | La couleur du trait | La couleur du texte de l'élément |
C'est cette valeur par défaut de border-style, none, qui explique le piège le plus courant : tant qu'aucun style n'est précisé, la bordure reste totalement invisible, quelle que soit sa largeur ou sa couleur déclarées.
La couleur réserve elle aussi une surprise : sans border-color déclarée, la bordure hérite de currentColor, la couleur du texte de l'élément. Changer color sur un bouton change donc aussi la couleur de sa bordure, sans qu'aucune règle border-color n'ait jamais été écrite.
Les valeurs de border-style
Au-delà de solid, plusieurs styles de trait existent, chacun avec un usage précis dans une interface.
| Valeur | Rendu | Usage typique |
|---|---|---|
solid | Trait plein continu | La très grande majorité des cas |
dashed | Tirets réguliers | Zone de dépôt de fichier, séparateur discret |
dotted | Points réguliers | Ligne de soulignement décorative |
double | Deux traits parallèles | Bordures décoratives, rarement en interface |
none | Aucune bordure affichée | Retirer une bordure héritée |
Définir une bordure par côté
Chaque côté accepte son propre raccourci complet : border-top, border-right, border-bottom et border-left, chacun avec sa largeur, son style et sa couleur indépendants. C'est ce qui permet un motif d'interface très répandu, la carte signalée par une seule bordure colorée.
.alerte {
border-left: 4px solid #f59e0b;
padding: 12px 16px;
background-color: #fffbeb;
}Trois autres côtés restent sans bordure, seul le gauche porte un trait épais et coloré : un signal visuel immédiat, sans forme graphique supplémentaire à charger.
border et la taille de la boîte
Comme le padding, border occupe un espace réel : par défaut, elle s'ajoute à la largeur et à la hauteur définies par width et height, sans jamais les remplacer.
Ajouter une bordure au survol d'un bouton qui n'en avait pas fait grandir la boîte de deux fois sa largeur, provoquant un léger décalage des éléments voisins. Réservez toujours l'espace à l'avance avec une bordure transparente au repos, border: 1px solid transparent, ou passez l'élément en box-sizing: border-box pour que l'ajout ne change plus rien à la taille finale.
Passer l'ensemble d'un projet en box-sizing: border-box règle ce problème une bonne fois pour toutes, y compris pour les bordures ajoutées dynamiquement au survol, à la sélection d'un champ ou à l'apparition d'un message d'erreur.
Questions fréquentes
Pourquoi ma bordure n'apparaît-elle pas alors que j'ai défini border-width ?
Parce que border-style vaut none par défaut : une largeur seule ne suffit jamais à afficher une bordure. Il faut toujours préciser un style, solid dans l'immense majorité des cas, pour que le trait devienne visible.
border et outline, quelle différence concrète ?
border occupe un espace réel dans la boîte et s'ajoute à sa taille par défaut, tandis que l'outline se dessine par-dessus sans jamais déplacer les éléments voisins. C'est pour cette raison que l'anneau de focus au clavier utilise presque toujours outline plutôt que border.
Comment arrondir les angles d'une bordure ?
Avec la propriété border-radius, indépendante de border mais qui s'applique automatiquement au trait dessiné par cette dernière, ainsi qu'au fond de l'élément et à toute ombre portée.