CSS Côtés de Bordure
Bordure CSS - Côtés Individuels
D'après les 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 définir chacune des bordures (haut, droite, bas et gauche) :
Dans l'exemple ci-dessous, nous utilisons les quatre propriétés mentionnées ci-dessus pour définir le style de chaque côté de la bordure :
Exemple
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
} Résultat :
Nous pouvons également utiliser la propriété abrégée border-style pour obtenir le même résultat.
L'exemple ci-dessous donne le même résultat que l'exemple précédent :
Exemple
p {
border-style: dotted solid;
} Résultat :
Donc, voici comment cela fonctionne :
Si la propriété border-style a quatre valeurs :
- border-style: dotted solid double dashed;
- la bordure supérieure est en pointillé
- la bordure droite est solide
- la bordure inférieure est double
- la bordure gauche est en tirets
Si la propriété border-style a trois valeurs :
- border-style: dotted solid double;
- la bordure supérieure est en pointillé
- les bordures droite et gauche sont solides
- la bordure inférieure est double
Si la propriété border-style a deux valeurs :
- border-style: dotted solid;
- les bordures supérieure et inférieure sont en pointillé
- les bordures droite et gauche sont solides
Si la propriété border-style a une valeur :
- border-style: dotted;
- les quatre bordures sont en pointillé
Exemple
/* Quatre valeurs */
p {
border-style: dotted solid double dashed;
}
/* Trois valeurs */
p {
border-style: dotted solid double;
}
/* Deux valeurs */
p {
border-style: dotted solid;
}
/* Une valeur */
p {
border-style: dotted;
} La propriété border-style est utilisée dans l'exemple ci-dessus. Cependant, elle fonctionne également avec border-width et border-color .