Av exemplen på föregående sidor har du sett att det är möjligt att ange en olika gränser för varje sida.
I CSS finns det också egenskaper för att specificera var och en av gränserna (överst, höger, botten och vänster):
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Resultat :
Prova själv →
<!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>
Exemplet ovan ger samma resultat som detta:
p { border-style: dotted solid;
}
Prova själv →
<!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>
Så här är hur det fungerar:
Om egenskapen class="w3-codespan">border-style
har fyra värden:
kantstil: prickad fast dubbelstreckad;
övre kanten är prickad
höger kant är fast
bottenkanten är dubbel
vänster kant är streckad
Om egenskapen class="w3-codespan">border-style
har tre värden:
kantstil: prickad hel dubbel;
övre kanten är prickad
höger och vänster kanter är fasta
bottenkanten är dubbel
Om egenskapen class="w3-codespan">border-style
har två värden:
kantstil: prickad fast;
övre och nedre kanterna är prickade
höger och vänster kanter är fasta
Om egenskapen class="w3-codespan">border-style
har ett värde:
kantstil: prickad;
alla fyra kanterna är prickade
/* 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;
}
Prova själv →
<!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>
Egenskapen class="w3-codespan">border-style
används i exemplet ovan. Det fungerar dock också med class="w3-codespan">kantbredd
och class="w3-codespan">kantfärg
.