Edellisillä sivuilla olevista esimerkeistä olet nähnyt, että on mahdollista määrittää a eri reuna molemmille puolille.
CSS:ssä on myös ominaisuuksia kunkin reunuksen määrittämiseksi (ylä, oikea, alhainen ja vasen):
p
{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
Tulos:
Kokeile itse →
<!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>
Yllä oleva esimerkki antaa saman tuloksen kuin tämä:
p { border-style: dotted solid;
}
Kokeile itse →
<!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>
Joten, tässä on kuinka se toimii:
Jos class="w3-codespan">border-style
-ominaisuudella on neljä arvoa:
reunustyylinen: katkoviiva kaksoisviiva;
yläreuna on pisteviiva
oikea reuna on kiinteä
alareuna on kaksinkertainen
vasen reuna on katkoviiva
Jos class="w3-codespan">border-style
-ominaisuudella on kolme arvoa:
reunustyylinen: pisteviiva kaksoispiste;
yläreuna on pisteviiva
oikea ja vasen reunat ovat kiinteät
alareuna on kaksinkertainen
Jos class="w3-codespan">border-style
-ominaisuudella on kaksi arvoa:
reunatyyli: pisteviiva, yhtenäinen;
ylä- ja alareunat on pisteytetty
oikea ja vasen reunat ovat kiinteät
Jos class="w3-codespan">border-style
-ominaisuudella on yksi arvo:
reunatyyli: pisteviiva;
kaikki neljä reunaa on pisteytetty
/* 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;
}
Kokeile itse →
<!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>
Yllä olevassa esimerkissä käytetään ominaisuutta class="w3-codespan">border-style
. Toimii kuitenkin myös class="w3-codespan">reunan leveys
ja class="w3-codespan">reunuksen väri
.