CSS : Les bordures

[Plan de la catégorie CSS]

Propriété CSS border


Les CSS permettent de manipuler les bordures d’un élément. La propriété CSS à utiliser est : border

Exemple(s)

border : 1px solid #FF0000

Cet exemple affiche une bordure rouge de 1 pixel.

La propriété border regroupe en fait les valeurs de 3 autres propriétés:

Taille de la bordure : border-width

Valeur numérique (px, em) ou parmi les trois valeurs suivantes : thin (fine), medium (moyenne), thick (épaisse).

Attention : Ces trois valeurs ne sont pas prise en compte de la même manière suivant le navigateur employé.

Style de la bordure : border-style

solid Exemple style solid pour les bordures css

border: 3px solid #000000;
double Exemple style double pour les bordures css

border: 3px double #000000;
groove Exemple style groove pour les bordures css

border: 3px groove #000000;
dotted Exemple style dotted pour les bordures css

border: 3px dotted #000000;
dashed Exemple style dashed pour les bordures css

border: 3px dashed #000000;
inset Exemple style inset pour les bordures css

border: 3px inset #000000;
outset Exemple style outset pour les bordures css

border: 3px outset #000000;
ridge Exemple style ridge pour les bordures css

border: 3px ridge #000000;

Couleur de la bordure : border-color

Couleur en rgb, hexa ou nom (Couleur en CSS)

Pour manipuler un des bords de la bordure, il faut utiliser les propriétés suivantes :

border-top La bordure supérieure de l’élément HTML
border-right La bordure droite de l’élément HTML
border-bottom La bordure inférieure de l’élément HTML
border-left La bordure gauche de l’élément HTML

Dernière modification : 04-04-2009

 top