CSS border-style egenskap

Definition och användning

border-style-attributet används för att ställa in stilen för alla kanter på ett element, eller enskilt för varje kant.

Kanten kan bara visas när detta värde inte är none.

Exempel 1

border-style:dotted solid double dashed;
  • Övre kant är punkter
  • Höger kant är rak linje
  • Nedre kant är dubbel linje
  • Vänster kant är genomsträckt linje

Exempel 2

border-style:dotted solid double;
  • Övre kant är punkter
  • Höger kant och vänster kant är rak linje
  • Nedre kant är dubbel linje

Exempel 3

border-style:dotted solid;
  • Övre kant och nedre kant är punkter
  • Höger kant och vänster kant är rak linje

Exempel 4

border-style:dotted;
  • Alla 4 kanter är punkter

Se också:

CSS-lärning:CSS kant

HTML DOM referenshandbok:borderStyle-egenskapen

Exempel

Ställ in stilen för 4 kanter:

p
  {
  border-style:solid;
  }

Prova det själv

CSS-syntax

border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit;

Egenskapsvärden

Värden Beskrivning
none Definierar ingen kantlinje.
hidden Är lika med "none". Men tillämpas inte på tabeller, där "hidden" används för att lösa kantlinjekonflikter.
dotted Definierar en punktlinje. Presenteras som en solid linje i de flesta webbläsare.
dashed Definierar en punktlinje. Presenteras som en solid linje i de flesta webbläsare.
solid Definierar en solid linje.
double Definierar dubbla linjer. Bredden på linjerna är lika med värdet av border-width.
groove Definierar 3D-fåra-kantlinjer. Effekten beror på värdet av border-color.
ridge Definierar 3D-ryggkantlinjer. Effekten beror på värdet av border-color.
inset Definierar 3D-inset-kantlinjer. Effekten beror på värdet av border-color.
outset Definierar 3D-outset-kantlinjer. Effekten beror på värdet av border-color.
inherit Specificerar att kantlinjestilen ska ärva från föräldrelementet.

Beskrivning

Den mest osäkra kantlinjestilen är double. Den definieras som två linjers bredd plus det utrymme mellan dessa linjer som är lika med border-width-värdet. Dock anger CSS-standarden inte om en av linjerna är tjockare än den andra eller om båda linjerna bör vara lika tjocka, och det anges inte heller om utrymmet mellan linjerna bör vara tjockare än linjerna. Allt detta bestäms av användaragenten, och skaparen har ingen inverkan på detta beslut.

Tekniska detaljer

Standardvärde: inte specificerad
Arvsförmåga: no
Version: CSS1
JavaScript-syntax: object.style.borderStyle="dotted double"

Fler exempel

Ställ in kantlinjestilar för alla fyra sidor
Detta exempel visar hur man ställer in kantlinjestilar för alla fyra sidor.
Ställ in olika kantlinjer på varje sida
Detta exempel visar hur man ställer in olika kantlinjer på elementets sidor.

Webbläsarstöd

Talen i tabellen anger den första webbläsarens version som fullständigt stöder egenskapen.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 3.5