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 border-style angiver, hvilken slags kant der skal vises.
Følgende værdier er tilladt:
dotted- Definerer en stiplet kant
solid- Definerer en fast grænse
double- Definerer en dobbelt kant
groove- Definerer en 3D-rillet kant. Effekten afhænger af grænsefarveværdien
ridge- Definerer en 3D-kantet kant. Effekten afhænger af grænsefarveværdien
inset- Definerer en 3D indsat kant. Effekten afhænger af grænsefarveværdien
outset- Definerer en 3D-startkant. Effekten afhænger af grænsefarveværdien
none- Definerer ingen grænse
hidden- Definerer en skjult grænse
Egenskaben 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 border-style er indstillet!