6.5 Bordure CSS

Types de bordure et emplacement

Une bordure CSS a 3 propriétés :

• border-color défini à l’aide d’une unité de couleur
• border-style peut être solide, tiret, pointillé…
• border-width défini en utilisant une unité de taille

Elle a également 4 côtés possibles :

• border-top
• border-bottom
• border-left
• border-right

blockquote { border-color: yellow; border-style: solid; border-width: 1px;}

La propriété abrégée border permet de définir les 3 propriétés à la fois :

blockquote {border: 1px solid yellow;}

Bordure unique

Si vous souhaitez définir une bordure sur un seul des quatre côtés, vous devez inclure sa position dans la propriété CSS. Par exemple, pour une bordure inférieure, vous pouvez écrire :

blockquote { border-bottom-color: yellow; border-bottom-style: solid; border-bottom-width: 1px;}

En ce qui concerne la propriété border chaque côté a sa version abrégée également :

blockquote { border-bottom: 1px solid yellow;}

Et si je veux 3 frontières ?
Dois-je les définir individuellement ?

Comme vous l’auriez deviné, le moyen le plus rapide d’avoir trois bordures est de les définir toutes les quatre puis de supprimer celles que vous ne voulez pas :

blockquote {border: 1px solid yellow; border-left: none;}

Combinaisons abrégées

Puisqu’il existe 3 propriétés de bordure et 4 emplacements de bordure, il y a 12 combinaisons possibles :

C’est beaucoup de propriétés CSS disponibles. Vous finirez généralement par n’utiliser que les 5 versions abrégées :

• border
• border-top
• border-bottom
• border-left
• border-right