CSS-gränser


Innehållsförteckning

    Visa innehållsförteckning


CSS-gränsegenskaperna låter dig ange stilen, bredd och färg på ett elements kant.


Jag har bårder på alla sidor.


Jag har en röd bottenkant.


Jag har rundade gränser.


Jag har en blå vänsterkant.


CSS kantstil

Egenskapen class="w3-codespan">border-style anger vilken typ av kantlinje som ska visas.

Följande värden är tillåtna:

class="w3-codespan">dotted

- Definierar en streckad kant

class="w3-codespan">solid

- Definierar en fast gräns

class="w3-codespan">double

- Definierar en dubbel kant

class="w3-codespan">groove

- Definierar en 3D-räfflad kant. Effekten beror på kantfärgsvärdet

class="w3-codespan">ridge

- Definierar en 3D-kantad kant. Effekten beror på kantfärgsvärdet

class="w3-codespan">inset

- Definierar en 3D-infälld kantlinje. Effekten beror på kantfärgsvärdet

class="w3-codespan">outset

- Definierar en 3D-startkant. Effekten beror på kantfärgsvärdet

class="w3-codespan">none

- Definierar ingen gräns

class="w3-codespan">hidden

- Definierar en dold gräns

Egenskapen class="w3-codespan">border-style kan ha från ett till fyra värden (för den övre kanten, den högra kanten, den nedre kanten och den vänstra kanten).

Exempel

Demonstration av de olika kantstilarna:

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 hidden border.

A mixed border.

Prova själv →

<!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>


Obs: Ingen av de ANDRA CSS-gränsegenskaperna (som du kommer att lära dig mer om i nästa kapitel) kommer att ha NÅGON effekt om inte Egenskapen class="w3-codespan">border-style är inställd!