Le CSS vous offre un large choix de bordures pour décorer votre page. De nombreuses propriétés CSS vous permettent de modifier l'apparence de vos bordures : border-width, border-color, border-style…
La propriété permettant d'obtenir une bordure en CSS est tout simplement border. A cet attribut, on pourra associer:
- une épaisseur de bordure (border-width),
- un style (border-style)
- et une couleur (border-color).
Les épaisseurs des bordures peuvent être déclarées en de nombreuses unités, mais l'usage est d'utiliser les pixels (px).
border-width:2px;
Huit styles sont possibles, (la valeur par défaut étant none):
bordure dotted (pointillé)
bordure dashed (tirets)
bordure solid (solide)
bordure double (double)
bordure groove (rainurée)
bordure ridge (relief)
bordure inset (relief intérieur)
bordure outset (relief extérieur)
En dessous d'une épaisseur 3 pixels, pas grande chance de voir le rendu "double"
(ce qui est logique du reste...).
Vous pouvez écrire le style de votre bordure de cette façon:
Border: épaisseur-bordure style couleur ;
Exemple : h1 { border: 3px blue dashed; }
si vous voulez mettre des bordures différentes en fonction du côté (haut, bas, gauche ou droite), vous pouvez le faire sans problème.
Dans ce cas, vous devrez utiliser ces quatre propriétés :
border-top : bordure du haut ;
border-bottom : bordure du bas ;
border-left : bordure de gauche ;
border-right : bordure de droite.
Il existe aussi des équivalents pour paramétrer chaque détail de la bordure si vous le désirez :
border-top-width pour modifier l'épaisseur de la bordure du haut,
border-top-color pour la couleur du haut, etc.