En CSS il y a plusieurs manières de modifier les bordures, que ce soit les bordures de vos paragraphes, de vos images ou encore de vos balises <strong> ou <em>.
La propriété que nous allons voir en premier est la propriété border, littéralement bordure.
Il s'agit d'une super-propriété qui combine donc trois propriétés, séparées par un espace, en une seule.
Voici les trois propriétés qu'elle combine :
border-width : la largeur de la bordure, généralement en pixels
border-color : la couleur de la bordure, comme vous le savez il y a trois manières de noter la couleur en CSS (voir chapitre précédent)
border-style : le style de la bordure, nous verrons ce que ça veut dire un peu plus loin
Jusque-là rien ne pose problème. La super-propriété border s'écrit comme ceci :
p { border: [border-width] [border-color] [border-style]; } Par exemple :
p { border: 2px red solid; } Pour les deux première propriétés, la largeur et la couleur, il n'y a normalement aucun problème.
Par contre pour la dernière, le style, il s'agit d'une propriété nouvelle que nous n'avons pas encore vu dans ce tutoriel.
Il s'agit de l'effet de style que l'on peut appliquer à la bordure, par exemple si on veut une bordure uniforme ou une bordure composée de pointillés.
La propriété border-style peut prendre ces valeurs :
none : pas de bordure (par défaut)
hidden : bordure cachée
solid : bordure uniforme
double : bordure double
dotted : bordure en pointillés
dashed : bordure en tirets
groove : bordure en relief
ridge : effet relief inversé
outset : effet 3D global surélevé
inset : effet 3D global enfoncé
Sachez que vous n'êtes pas non plus obligés d'avoir vos quatre bordures (haut, bas, gauche, droite) de la même manière.
Il existe aussi des super-propriétés que l'on peut utiliser pour chaque bordure séparément :
border-top : bordure du haut
border-bottom : bordure du bas
border-left : bordure de gauche
border-right : bordure de droite
Ces super-propriétés fonctionnent exactement de la même manière que border, c'est-à-dire qu'elle sont composées des mêmes propriétés : largeur, couleur, style. Voici les liens de navigation rapide du chapitre Bordures et ombres : 1. Modifier les bordures 2. Arrondir les bordures 3. Les ombres