CSS Kante

CSS kantegenskab

CSS border Egenskaben lader dig specificere elementkantens stil, bredde og farve.

Jeg har kant omkring alle kanter.

Jeg har en rød nederste kant.

Jeg har afrundede kantstilar.

Jeg har en blå venstre kant.

CSS kantstil

border-style Egenskaben specificerer den kanttype, der skal vises.

Tillader følgende værdier:

  • punkteret - Definer punkteret kant
  • knapped - Definer brudt kant
  • enkel - Definer ens kant
  • dobbelt - Definer dobbelt kant
  • sjælden - Definer 3D fure kant. Effekten afhænger af border-color værdien
  • knold - Definer 3D kile kant. Effekten afhænger af border-color værdien
  • indtrukket - Definer 3D indtrukket kant. Effekten afhænger af border-color værdien
  • udtrækket - Definer 3D udtrækket kant. Effekten afhænger af border-color værdien
  • intet - Definer ingen kant
  • ugtjort - Definer skjult kant

border-style Egenskaben kan indstilles til mellem én og fire værdier (brugt til øverste kant, højre kant, nederste kant og venstre kant).

Eksempel

Demonstration af forskellige kantstilar

p.punkteret {border-style: punkteret;}
p.knapped {border-style: knapped;}
p.enkel {border-style: enkel;}
p.dobbelt {border-style: dobbelt;}
p.sjælden {border-style: sjælden;}
p.knold {border-style: knold;}
p.indtrukket {border-style: indtrukket;}
p.udtrækket {border-style: udtrækket;}
p.intet {border-style: intet;}
p.ugtjort {border-style: ugtjort;}
p.mix {border-style: dotted dashed solid double;}

Resultat:

Punktkant.

Streget kant.

Enkeltkant.

Dobbeltkant.

Furet kant. Effekten afhænger af værdien af border-color.

Rektangulær kant. Effekten afhænger af værdien af border-color.

3D inset kant. Effekten afhænger af værdien af border-color.

3D outset kant. Effekten afhænger af værdien af border-color.

Ingen kant.

Skjult kant.

Blandet kant.

Prøv det selv

Bemærk:medmindre der er sat border-style Egenskab, ellers vil andre CSS-beskyttelsesegenskaber (som vil blive beskrevet i det næste kapitel) ikke have nogen effekt!