Dans cet exemple, on spécifie un espacement vertical de '1em' ('padding−top' et 'padding−bottom') et un espacement horizontal de '2em' ('padding−right' et 'padding−left'). L'unité 'em' s'entend relativement à la taille de la police de l'élément : une valeur '1em' correspond à la taille de la police utilisée.
8.5 Les propriétés de bordure
Ces propriétés spécifient l'épaisseur, la couleur et le style de l'aire de bordure d'une boîte. Celles−ci s'appliquent à tous les éléments.
Note : Plus particulièrement en HTML, les agents utilisateurs peuvent rendre les bordures de certains éléments (ex. les boutons, les menus, etc.) dans un aspect différent de celui des éléments "ordinaires".
8.5.1 L'épaisseur de bordure : les propriétés 'border−top−width', 'border−right−width', 'border−bottom−width', 'border−left−width' et 'border−width'
Ces propriétés spécifient l'épaisseur de l'aire de bordure. Les propriétés définies ici se réfèrent au type de valeur
<bordure−épaisseur>, celui−ci accepte l'une des valeurs suivantes : thin
Une bordure mince.
medium
Une bordure moyenne.
thick
Une bordure épaisse.
<longueur>
L'épaisseur de la bordure a une valeur explicite. Cette valeur explicite ne peut être négative.
L'interprétation des trois premières valeurs dépend de l'agent utilisateur. Cependant, celui−ci doit respecter les directives suivantes :
'thin' <='medium' <= 'thick'.
De plus, leurs épaisseurs doivent rester constantes dans tout le document.
'border−top−width', 'border−right−width', 'border−bottom−width', 'border−left−width' Valeur : <bordure−épaisseur> | inherit
Initiale : medium
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet Médias : visuel
Ces propriétés spécifient les valeurs d'épaisseur des bordures du haut, de droite, du bas et de gauche d'une boîte.
'border−width'
Valeur : <bordure−épaisseur>{1,4} | inherit Initiale : voir les propriétés individuelles S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet Médias : visuel
Cette propriété raccourcie sert à regrouper les propriétés 'border−top−width', 'border−right−width', 'border−bottom−width' et 'border−left−width' dans la feuille de style.
Quand il n'y a qu'une seule valeur spécifiée, celle−ci s'applique à tous les côtés. S'il y en a deux, alors la première valeur s'applique pour la bordure du haut et celle du bas, et la seconde pour la bordure de droite et celle de gauche.
Avec trois valeurs, la bordure du haut reçoit la première valeur, les bordures gauche et droite la deuxième et la bordure du bas la troisième. Pour quatre valeurs, celles−ci s'appliquent respectivement aux bordures du haut, de droite, du bas et de gauche.
Exemple(s) :
Les commentaires dans l'exemple ci−dessous précisent les valeurs des bordures du haut, de droite, du bas et de gauche :
H1 { border−width: thin } /* thin thin thin thin */
H1 { border−width: thin thick } /* thin thick thin thick */
H1 { border−width: thin thick medium } /* thin thick medium thick */
8.5.2 La couleur de bordure : les propriétés 'border−top−color', 'border−right−color', 'border−bottom−color', 'border−left−color' et 'border−color'
Ces propriétés spécifient la couleur des bordures d'une boîte.
'border−top−color', 'border−right−color', 'border−bottom−color', 'border−left−color' Valeur : <couleur> | transparent | inherit
Initiale : la valeur de la propriété 'color' S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet Médias : visuel 'border−color'
Valeur : [<couleur> | transparent]{1,4} | inherit Initiale : voir les propriétés individuelles S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet Médias : visuel
La propriété 'border−color' spécifie la couleur des quatre côtés de la bordure. Voici la signification des valeurs que celle−ci admet :
<couleur>
Spécifie la valeur d'une couleur ; transparent
La bordure est transparent (tout en ayant une épaisseur).
La propriété 'border−color' admet une à quatre valeurs, les valeurs étant appliquées sur les quatres côtés de la bordure de la même façon que pour la propriété 'border−width' définie plus haut.
Quand, pour un élément, aucune valeur de couleur n'est spécifiée par une propriété de bordure, les agents utilisateurs doivent utiliser celle de la propriété 'color' de cet élément comme valeur calculée pour la couleur de bordure.
Exemple(s) :
Ici, la bordure aura l'aspect d'un trait plein noir.
P {
color: black;
background: white;
border: solid;
}
8.5.3 Le style de bordure : les propriétés 'border−top−style', 'border−right−style', 'border−bottom−style', 'border−left−style' et 'border−style'
Ces propriétés spécifient le dessin des bordures d'une boîte (en trait plein, trait double, trait pointillé, etc.). Les propriétés définies ici se réfèrent au type de valeur <bordure−style>, celui−ci accepte l'une des valeurs suivantes : none
Aucune bordure. Cette valeur force la valeur calculée de la propriété 'border−width' à 0 ; hidden
Idem à 'none', sauf pour la résolution des conflits de bordure des éléments de table ; dotted
La bordure est une ligne en pointillé ; dashed
La bordure est une ligne en tirets ; solid
La bordure est une ligne en trait plein.
double
La bordure est une ligne double, de deux traits pleins. La somme de ces lignes et de l'espace entre elles est égale à la valeur de 'border−width'.
groove
La bordure donne l'impression qu'elle est gravée dans le canevas ; ridge
À l'opposé de 'groove', la bordure semble sortir du canevas ; inset
La bordure donne l'impression que la boîte entière est incrustée dans le canevas ; outset
À l'opposé de 'inset', la bordure donne l'impression que la boîte entière est extrudée du canevas.
Les bordures sont dessinées en surimpression sur l'arrière−plan de la boîte. Les couleurs adoptées pour le dessin des valeurs 'groove', 'ridge', 'inset' et 'outset' devraient se baser sur celle de la propriété 'border−color' de l'élément, cependant, les agents utilisateurs peuvent employer leur propre algorithme pour déterminer les couleurs qui vont être appliquées. Par exemple, si la propriété 'border−color' avait une valeur 'silver', un agent utilisateur pourrait simuler la pente d'une bordure à l'aide d'un dégradé allant du blanc vers un gris foncé.
Les agents utilisateurs conformes peuvent remplacer l'interprétation des valeurs 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' et 'outset' par celle de la valeur 'solid'.
'border−top−style', 'border−right−style', 'border−bottom−style', 'border−left−style' Valeur : <bordure−style> | inherit
Initiale : none
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet Médias : visuel 'border−style'
Valeur : <bordure−style>{1,4} | inherit Initial: voir les propriétés individuelles S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet Médias : visuel
La propriété 'border−style' admet une à quatre valeurs, les valeurs étant appliquées sur les quatres côtés de la bordure de la même façon que pour la propriété 'border−width' définie plus haut.
Exemple(s) :
#xy34 { border−style: solid dotted }
Dans cet exemple, les bordures horizontales auront la valeur 'solid' et les verticales la valeur 'dotted'.
La valeur initiale de style de bordure étant 'none', aucune bordure ne sera visible si on ne spécifie pas de valeur de style pour celle−ci.
8.5.4 Les propriétés raccourcies de bordure : 'border−top', 'border−bottom', 'border−right', 'border−left' et 'border'
'border−top', 'border−right', 'border−bottom', 'border−left'
Valeur : [ <bordure−épaisseur> || <bordure−style> || [ <couleur> | transparent ] ] | inherit Initiale : voir les propriétés individuelles
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet Médias : visuel
Cette propriété raccourcie spécifie les épaisseurs, les styles et les couleurs des bordures du haut, de droite, du bas et de gauche d'une boîte.
Exemple(s) :
H1 { border−bottom: thick solid red }
Cette règle−ci va appliquer une épaisseur, un style et une couleur à la bordure du bas, celle sous l'élément H1. Les valeurs omises dans la déclaration sont sensées garder leur valeur initiale. Dans la règle suivante, comme celle−ci ne précise pas de valeur de couleur pour la bordure, celle−ci prendra la valeur de la propriété 'color' de l'élément H1 :
H1 { border−bottom: thick solid }
'border'
Valeur : [ <bordure−épaisseur> || <bordure−style> || [ <couleur> | transparent ] ] | inherit Initiale : voir les propriétés individuelles
S'applique à : tous les éléments
Héritée : non
Pourcentage : sans objet Médias : visuel
La propriété raccourcie 'border' spécifie les mêmes épaisseurs, couleurs et styles pour les quatre côtés d'une boîte.
À la différence des propriétés 'margin' et 'padding', cette propriété 'border' ne permet pas de donner des valeurs propres à chacune des quatre bordures. Pour cela, il faut employer l'une, ou plusieurs, des propriétés individuelles de bordure.
Exemple(s) :
Par exemple, la première règle équivaut aux quatre qui la suivent :
P { border: solid red } P {
border−top: solid red;
border−right: solid red;
border−bottom: solid red;
border−left: solid red }
Dans une certaine mesure, les actions des propriétés se recoupent, aussi l'ordre dans lequel elles surviennent revêt de l'importance.
Exemple(s) :
Considérons cet exemple :
BLOCKQUOTE {
border−color: red;
border−left: double;
color: black }
Ici, la valeur de la couleur de bordure gauche est 'black', et celles des autres bordures est 'red'. Ceci est causé par 'border−left' spécifiant l'épaisseur, le style et la couleur. Aucune valeur de couleur n'étant spécifiée, celle−ci est héritée de la propriété 'color'. Que cette dernière survienne après la propriété 'border−left' ne fait pas de différence.