18. Les bordures

Publié le par Majunia

CSS permet d’entourer très simplement les divers éléments de type bloc ainsi que certains éléments en ligne (ex: <img>) d’une page web par des bordures aux caractéristiques (style, épaisseur, couleur) libres.

propriétés à connaître :

• border-style
met en place le type des bordures d’un élément. Tous les navigateurs ne reconnaissent pas la valeur groove, créant un effet 3D gravé dans la page.

• border-width
définit l’épaisseur des bordures. N’a de sens qu’en accompagnement de border-style et de border-color.

• border-color
définit la couleur des bordures. Ne s’applique qu’en complément de border-style ou de border-width.

 

Chacun des quatre côtés d’un élément peut être représenté différemment. On précise à la suite plusieurs valeurs, chacune séparée d’un espace, dont l’interprétation dépendra de leur nombre.

• 2 valeurs :
- pour border-style et border-width :
affectent les côtés horizontaux et verticaux du cadre.

- pour border-color:
définissent une couleur par orientation (horizontale ou verticale) de côté.

• 3 valeurs
- pour border-style et border-width :
 affectent tour à tour le haut, les côtés verticaux, et le bas.

- pour border-color :
permettent de plus de distinguer le haut et le bas.

• 4 valeurs :
- pour border-style et border-width :
affectent les quatre côtés en tournant dans le sens horaire.

 - pour border-color
individualisent chaque côté.


N'oubliez pas de consulter l'article sur les propriétés de formatage de texte !

accéder à l'article suivant
Publicité

Publié dans XHTML - CSS

Pour être informé des derniers articles, inscrivez vous :
Commenter cet article