Les bordures, arrière-plans et images
CHAPITRE 6
87
L’épaisseur des bordures
La propriété border-width définit l’épaisseur des bordures, et n’a de sens qu’en
accompagnement d’un style (border-style) ou d’une couleur de bordure (bordercolor). Certains navigateurs n’interprètent d’ailleurs que les bordures ayant renseigné ces deux propriétés.
On peut préciser les épaisseurs de plusieurs manières (l’interprétation des trois premières dépend du navigateur) :
• thin : bordure fine ;
• medium : bordure moyenne ;
• thick : bordure épaisse ;
• avec une mention numérique de longueur reprenant la syntaxe habituelle.
La syntaxe des mentions de longueurs est exposée au chapitre 5, dans la section portant sur les unités de taille de polices. À nouveau, fournir plusieurs valeurs permettra
de représenter différemment les quatre côtés de l’élément. Comme pour le style,
l’affectation des valeurs dépend de la taille de leur liste.
• Deux valeurs portent sur les côtés horizontaux puis verticaux.
Par exemple : border-width: 6px 2px;
• Trois valeurs représentent le haut, les côtés latéraux, et le bas.
Par exemple : border-width: thin medium 3em;
• Quatre valeurs définissent les côtés en partant du haut et en tournant dans le sens
horaire. Par exemple : border-width: thin medium 3em 1em;
On peut ici encore définir directement l’épaisseur de chaque côté avec les propriétés
border-top-width, border-right-width, border-bottom-width et border-left-width.
La couleur des bordures
Elle est mise en place par la propriété border-color, qui ne s’applique qu’en complément d’un style (border-style) ou d’une épaisseur de bordure (border-width). Sans
cela, la bordure est inexistante.
BOGUE Internet Explorer
Internet Explorer 6 présente un bogue de rendu visuel : les bordures d’un pixel de large dont le style est
défini en dotted (pointillés) sont en réalité affichées en style dashed (tirets) !
La version 7 du navigateur corrige ce bogue.
RAPPEL Notation des couleurs
Les représentations de la couleur évoquées au chapitre 4, notamment les notations hexadécimales courtes, sont toujours valides dans ce contexte.
CHAPITRE 6
87
L’épaisseur des bordures
La propriété border-width définit l’épaisseur des bordures, et n’a de sens qu’en
accompagnement d’un style (border-style) ou d’une couleur de bordure (bordercolor). Certains navigateurs n’interprètent d’ailleurs que les bordures ayant renseigné ces deux propriétés.
On peut préciser les épaisseurs de plusieurs manières (l’interprétation des trois premières dépend du navigateur) :
• thin : bordure fine ;
• medium : bordure moyenne ;
• thick : bordure épaisse ;
• avec une mention numérique de longueur reprenant la syntaxe habituelle.
La syntaxe des mentions de longueurs est exposée au chapitre 5, dans la section portant sur les unités de taille de polices. À nouveau, fournir plusieurs valeurs permettra
de représenter différemment les quatre côtés de l’élément. Comme pour le style,
l’affectation des valeurs dépend de la taille de leur liste.
• Deux valeurs portent sur les côtés horizontaux puis verticaux.
Par exemple : border-width: 6px 2px;
• Trois valeurs représentent le haut, les côtés latéraux, et le bas.
Par exemple : border-width: thin medium 3em;
• Quatre valeurs définissent les côtés en partant du haut et en tournant dans le sens
horaire. Par exemple : border-width: thin medium 3em 1em;
On peut ici encore définir directement l’épaisseur de chaque côté avec les propriétés
border-top-width, border-right-width, border-bottom-width et border-left-width.
La couleur des bordures
Elle est mise en place par la propriété border-color, qui ne s’applique qu’en complément d’un style (border-style) ou d’une épaisseur de bordure (border-width). Sans
cela, la bordure est inexistante.
BOGUE Internet Explorer
Internet Explorer 6 présente un bogue de rendu visuel : les bordures d’un pixel de large dont le style est
défini en dotted (pointillés) sont en réalité affichées en style dashed (tirets) !
La version 7 du navigateur corrige ce bogue.
RAPPEL Notation des couleurs
Les représentations de la couleur évoquées au chapitre 4, notamment les notations hexadécimales courtes, sont toujours valides dans ce contexte.