A partir des exemples des pages précédentes, vous avez vu qu'il est possible de spécifier un bordure différente pour chaque côté.
En CSS, il existe également des propriétés permettant de spécifier chacune des bordures (top, droite, bas et gauche) :
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Résultat :
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
</style>
</head>
<body>
<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>
</body>
</html>
L'exemple ci-dessus donne le même résultat que ceci :
p { border-style: dotted solid;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: dotted solid;
}
</style>
</head>
<body>
<h2>Individual Border Sides</h2>
<p>2 different border styles.</p>
</body>
</html>
Voici donc comment cela fonctionne :
Si la propriété class="w3-codespan">border-style
a quatre valeurs :
border-style : pointillé plein double tiret ;
la bordure supérieure est en pointillés
la bordure droite est solide
la bordure inférieure est double
la bordure gauche est en pointillés
Si la propriété class="w3-codespan">border-style
a trois valeurs :
style de bordure : double solide en pointillé ;
la bordure supérieure est en pointillés
les bordures droite et gauche sont solides
la bordure inférieure est double
Si la propriété class="w3-codespan">border-style
a deux valeurs :
style de bordure : solide en pointillé ;
les bordures supérieure et inférieure sont en pointillés
les bordures droite et gauche sont solides
Si la propriété class="w3-codespan">border-style
a une valeur :
style de bordure : pointillé ;
les quatre bordures sont en pointillés
/* 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;
}
Essayez-le vous-même →
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
/* Four values */
p.four {
border-style: dotted solid double dashed;
}
/* Three values */
p.three {
border-style: dotted solid double;
}
/* Two values */
p.two {
border-style: dotted solid;
}
/* One value */
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p>
</body>
</html>
La propriété class="w3-codespan">border-style
est utilisée dans l'exemple ci-dessus. Cependant, cela fonctionne également avec class="w3-codespan">largeur de bordure
et class="w3-codespan">border-color
.