Toutes les boîtes, qu'elle que soit leur type, peuvent avoir une bordure.
Les bordures sont faites avec 3 composants :
- une épaisseur : border-width,
- un style : border-style,
- une couleur : border-color,
Le raccourci border permet de définir en une seule fois épaisseur, style et couleur, de façon identique pour les quatres bords.
Tester les bordures
Si on veut définir un bord uniquement sur un côté on peut utiliser les raccourcis border-top, border-right, border-bottom et border-left
Si la couleur des bords n'est pas précisée, ils prendront la couleur de la police de caractère (color).
L'unité de taille pour définir l'épaisseur est à choisir en fonction
du dispositif d'affichage. Par exemple il ne faut pas utiliser des
centimètres pour afficher sur un écran pour lequel on privilégiera
le pixel CSS (px), le cadratin (em) ou la référence à la racine du document
(rem).
Les unités utilisées peuvent être différentes pour chacune des
marges d'un élément.
L'unité de taille pour définir l'épaisseur d'une bordure ne peut pas être le
pourcentage (%).
Bordures individualisées
Complétez le code CSS pour obtenir le résultat suivant :
