Nous avons traité dans la page précédente la stylisation de l'intérieur des éléments de niveau bloc. Nous abordons ici la stylisation du cadre.
Les cadres ont trois propriétés : le style, la largeur et la couleur. Il est possible de styliser indépendament les quatre parties du cadre : le dessus, le côté droit, le dessous et le côté gauche. Nous suposerons tout d'abord qu'on choisit une stylisation identique pour les quatre côtés.
Le style de cadre est choisi avec la propriété border-style. Parmis les valeurs possibles, on retrouve solid (ligne continue),
dashed (ligne en tirets), dotted (ligne en pointillés) et double (ligne double). Une autre valeur possible (qui est la valeur par défaut) est
none (pas de cadre). Les autres propriétés n'ont aucun effet si le style est none.
solid, dashed, dotted et doubleThéoriquement, il existe d'autres valeurs, mais elles ne sont pas reconnues par plusieurs navigateurs.
L'épaisseur (border-width) peut être choisie de la manière habituelle, en pixels ou en cadratins. On peut aussi choisir une des valeurs prédéfinies : thin (mince),
medium (moyen, le défaut) ou thick (épais).
La couleur (border-color) peut être spécifiée en utilisant un des noms vus dans la page précédente. Le défaut est black.
Il est possible de spécifier le cadre en une déclaration combinée en indiquant dans l'ordre : l'épaisseur, le style et la couleur. Voici un exemple :
border: 1px solid #669;
La première et la dernière valeur peuvent être omises : les valeurs par défaut sont alors utilisées. Le style, lui, est obligatoire puisque la valeur par défaut est none.
Tout ce qui vient d'être dit peut être appliqué à un seul des côtés du cadre en remplaçant border par border-xxx où xxx peut être remplacé par
top pour le dessus, right pour le côté droit, bottom pour le dessous ou left pour
le côté gauche :
border-top: 2px solid #669;
border-bottom: dotted;
Il est aussi possible d'utiliser des déclarations combinées avec les propriétés border-style, etc. en stipulant les valeurs successivement pour le haut, la droite, le bas et la gauche
(c.-à-d. en partant du haut et en tournant dans le sens horaire autour de l'élément) :
border-width: 2px medium 4px thin;
S'il y a seulement trois valeurs, c'est pour le haut, la paire gauche/droite et le bas ; s'il y en a deux, c'est pour les paires haut/bas et gauche/droite :
border-style: double solid;
S'il y a seulement une valeur, c'est, comme on l'a vu, pour les quatre côtés.
Il est possible d'ajouter des arrondis aux coins de cadres en utilisant la propriété border-radius. Les valeurs possibles sont des longueurs (défaut : 0) ou des pourcentages.
Si on utilise une longueur, l'arrondi a la forme d'un arc de cercle; si on utilise un pourcentage, l'arrondi sera en général une portion d'ellipse (voir la figure à droite).
On peut spécifier simulatnément les arrondis semblables pour les quatre coins :
border-radius: 10px;
Il est aussi possible de spécifier les arrondis individuellement pour chacun des coins, en partant du coin supérieur gauche et en tournant dans le sens horaire autour de l'élément :
border-radius de 10px, 20px, 15% et
25%
border-radius: 10px 15% 20px 25%;
Il est aussi possible d'utiliser des déclarations combinées avec deux ou trois valeurs, mais leur utilité est assez limitée.