CSS - Les bordures et les ombres - 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 :

• La largeur : indiquez la largeur de votre bordure. Mettez une valeur en pixels (comme 2px).
• La couleur : c'est la couleur de votre bordure. Utilisez, comme on l'a appris, soit un nom de couleur (black, red,…), soit une valeur hexadécimale (#FF0000), soit une valeur RGB (rgb(198, 212, 37)).
• Le type de bordure : là, vous avez le choix. Votre bordure peut être un simple trait, ou des pointillés, ou encore des tirets, etc. Voici les différentes valeurs disponibles :
  • none : pas de bordure (par défaut) ;
  • solid : un trait simple ;
  • dotted : pointillés ;
  • dashed : tirets ;
  • double : bordure double ;
  • groove : en relief ;
  • ridge : autre effet relief ;
  • inset : effet 3D global enfoncé ;
  • outset : effet 3D global surélevé.

Ainsi, pour avoir une bordure bleue, en tirets, épaisse de 3 pixels autour de mes titres, je vais écrire :

1 2 3 4

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

En haut, à droite, à gauche, en bas…

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 :

• 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.

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 :

1 2 3 4 5

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.