Il y a trois propriétés distinctes pour définir une bordure. Ainsi qu'une propriété générique pour tout définir en une seule commande.
border-width: valeur;
border-top-width: valeur;
border-right-width: valeur;
border-bottom-width: valeur;
border-left-width: valeur;
Ces propriétés définissent la largeur de la bordure. Les valeurs possibles :
une valeur en pixels
thin
medium
thick
Une valeur en pixels (px) est ce qu'il y a de plus pratique et de plus précis pour définir la largeur de la bordure.
thin vous donnera une bordure fine.
medium vous donnera une bordure moyenne.
thick vous donnera une bordure épaisse.
Vous pouvez définir séparément chaque côté de la bordure, ou en une seule fois.
Si vous utilisez la propriété border-width, avec une seule valeur, vous aurez la même largeur de bordure sur les quatre côtés.
Si vous l'utilisez avec quatre valeurs différentes, celles-ci seront prises en compte dans l'ordre suivant : top (haut), right (droite), bottom (bas) et left (gauche).
Exemples :
Code:
border-top-width: 10px; border-bottom-width: 5px; border-top-width: 5px; border-right-width: 5px; border-bottom-width: 10px; border-left-width: 5px; border-width: 10px; border-width: 5px 5px 10px 5px;
border-top-style: valeur;
border-right-style: valeur;
border-bottom-style: valeur;
border-left-style: valeur;
De la même manière que pour sa largeur, on définira ici le style de la bordure. Chaque côté séparément, ou les quatre côtés en une seule fois, identiques ou différents. Valeurs possibles :
dashed
dotted
double
groove
hidden
inset
none
outset
ridge
solid
dashed vous donnera une bordure en petits tirets successifs.
dotted vous donnera une bordure en points successifs.
double vous donnera une bordure en ligne double.
groove vous donnera une bordure en 3D.
hidden vous donnera une bordure cachée (ou pas de bordure, quoi !)
inset vous donnera une bordure en creux intérieur.
none signifie pas de bordure. C'est la valeur par défaut.
outset est le contraire d'inset et vous donnera une bordure en léger relief.
ridge vous donnera une bordure en 3D (effet inverse de groove).
solid vous donnera une bordure en une ligne continue, la plus usitée.
Exemples :
Code:
border-top-style: solid; border-style: dashed; border-style: dashed dotted double solid;
border-top-color: valeur;
border-right-color: valeur;
border-bottom-color: valeur;
border-left-color: valeur;
C'est avec cette propriété que l'on définit la ou les couleurs de la bordure. Cela fonctionne exactement pareil que pour les propriétés précédentes. Valeurs possibles :
un nom de couleur
une valeur hexadécimale
un code RGB
On a déjà vu comment fonctionnaient les couleurs dans les textes. Elles fonctionnent de la même manière ici.
Exemples :
Code:
border-bottom-color: blue; border-color: #0000ff; border-color: red green blue yellow;
border: valeurs;
border-top: valeurs;
border-right: valeurs;
border-bottom: valeurs;
border-left: valeurs;
Ici, c'est la propriété générique dont je parlais au début de cet article. Elle permet de définir les trois paramètres d'un seul coup. Mais là, il faut une seule valeur par propriété, qui sera appliquée sur les quatre côtés pour border, et sur un seul côté, mais en utilisant border-top, border-right, border-bottom et/ou border-left.
Exemples :
Code:
border: 1px solid #ff0000; border-top: 2px dashed #ff0000; border-right: 2px dotted #00ff00; border-bottom: 2px double #0000ff; border-left: 2px solid #000000;