Bordures standard
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…
Pour aller à l'essentiel, je vous propose ici d'utiliser directement la super-propriété border qui regroupe l'ensemble de ces propriétés. Vous vous souvenez de la super-propriété background ? Cela fonctionne sur le même principe : on va pouvoir combiner plusieurs valeurs.
Pour border on peut utiliser jusqu'à trois valeurs pour modifier l'apparence de la bordure :
Ainsi, pour avoir une bordure bleue, en tirets, épaisse de 3 pixels autour de mes titres, je vais écrire :
h1 { border: 3px blue dashed; } |
La figure suivante vous présente les différents styles de bordures que vous pouvez utiliser.
Les différents types de bordures
Qui a dit que vous étiez obligés d'appliquer la même bordure aux quatre côtés de votre élément ?
Taratata, 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 :
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.
Ce sont aussi des super-propriétés, elles fonctionnent comme border mais ne s'appliquent donc qu'à un seul côté.
Pour ajouter une bordure uniquement à gauche et à droite des paragraphes, on écrira donc :
p { border-left: 2px solid black; border-right: 2px solid black; } |
On peut modifier les bordures de n'importe quel type d'élément sur la page. Nous l'avons fait ici sur les paragraphes mais on peut aussi modifier la bordure des images, des textes importants comme <strong>, etc.
Créé avec HelpNDoc Personal Edition: Générateur complet d'aides multi-formats