Bordure CSS
Bordure CSS - Côtés individuels
A partir des exemples des pages précédentes, vous avez vu qu'il est possible de spécifier une bordure différente pour chaque côté.
En CSS, il existe également des propriétés pour spécifier chacune des bordures (haut, droite, bas et gauche) :
Exemple
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Résultat:
Different Border Styles
L'exemple ci-dessus donne le même résultat que celui-ci :
Exemple
p {
border-style: dotted solid;
}
Alors, voici comment cela fonctionne :
Si la border-stylepropriété a quatre valeurs :
- style de bordure : plein en pointillé double tiret ;
- la bordure supérieure est en pointillé
- la bordure droite est pleine
- la bordure inférieure est double
- la bordure gauche est en pointillé
Si la border-stylepropriété a trois valeurs :
- style de bordure : double solide en pointillés ;
- la bordure supérieure est en pointillé
- les bordures droite et gauche sont pleines
- la bordure inférieure est double
Si la border-stylepropriété a deux valeurs :
- style de bordure : solide en pointillés ;
- les bordures supérieure et inférieure sont en pointillés
- les bordures droite et gauche sont pleines
Si la border-stylepropriété a une valeur :
- style de bordure : pointillé ;
- les quatre bordures sont en pointillés
Exemple
/* Four values */
p {
border-style: dotted solid double dashed;
}
/* Three
values */
p {
border-style: dotted solid double;
}
/* Two values */
p {
border-style: dotted solid;
}
/* One value */
p {
border-style: dotted;
}
La border-stylepropriété est utilisée dans l'exemple ci-dessus. Cependant, cela fonctionne aussi avec
border-width
et border-color.