CSS-grænseegenskaberne giver dig mulighed for at angive stilen, bredde og farve på et elements kant.
Jeg har grænser på alle sider.
Jeg har en rød bundkant.
Jeg har afrundede grænser.
Egenskaben class="w3-codespan">border-style angiver, hvilken slags kant der skal vises.
Følgende værdier er tilladt:
class="w3-codespan">dotted- Definerer en stiplet kant
class="w3-codespan">solid- Definerer en fast grænse
class="w3-codespan">double- Definerer en dobbelt kant
class="w3-codespan">groove- Definerer en 3D-rillet kant. Effekten afhænger af grænsefarveværdien
class="w3-codespan">ridge- Definerer en 3D-kantet kant. Effekten afhænger af grænsefarveværdien
class="w3-codespan">inset- Definerer en 3D indsat kant. Effekten afhænger af grænsefarveværdien
class="w3-codespan">outset- Definerer en 3D-startkant. Effekten afhænger af grænsefarveværdien
class="w3-codespan">none- Definerer ingen grænse
class="w3-codespan">hidden- Definerer en skjult grænse
Egenskaben class="w3-codespan">border-style kan have fra én til fire værdier (for den øverste kant, højre kant, nederste kant og venstre kant).
Demonstration af de forskellige kantstile:
p.dotted {border-style: dotted;}
p.dashed
{border-style: dashed;}
p.solid {border-style: solid;}
p.double
{border-style: double;}
p.groove {border-style: groove;}
p.ridge
{border-style: ridge;}
p.inset {border-style: inset;}
p.outset
{border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}Resultat :
A dotted border.
A dashed border.
A solid border.
A double border.
A groove border. The effect depends on the border-color value.
A ridge border. The effect depends on the border-color value.
An inset border. The effect depends on the border-color value.
An outset border. The effect depends on the border-color value.
No border.
A mixed border.
Prøv det selv →
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
Bemærk: Ingen af de ANDRE CSS-grænseegenskaber (som du vil lære mere om i de næste kapitler) vil have NOGEN effekt, medmindre Egenskaben class="w3-codespan">border-style er indstillet!