CSS border-stil egenskab

Definition og brug

border-style-egenskaben bruges til at sætte stilen på alle kanter på et element, eller specifikt for hver kant.

Kanten kan kun vises, når værdien ikke er none.

Eksempel 1

border-style:dotted solid double dashed;
  • Øverste kant er prikkede
  • Højre kant er enkle linjer
  • Nederste kant er dobbeltlinje
  • Venstre kant er brudt linje

Eksempel 2

border-style:dotted solid double;
  • Øverste kant er prikkede
  • Højre kant og venstre kant er enkle linjer
  • Nederste kant er dobbeltlinje

Eksempel 3

border-style:dotted solid;
  • Øverste kant og nederste kant er prikkede
  • Højre kant og venstre kant er enkle linjer

Eksempel 4

border-style:dotted;
  • Alle 4 kanter er prikkede

Se også:

CSS undervisning:CSS Kanter

HTML DOM reference manual:borderStyle-egenskaben

Eksempel

Indstil stilarter for fire kanter:

p
  {
  border-style:solid;
  }

Prøv det selv

CSS-syntaks

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

Egenskabsværdier

Værdier Beskrivelse
none Definerer ingen kant.
hidden Er det samme som "none". Dog anvendes "hidden" til at løse kantkonflikter, når det anvendes på tabeller.
dotted Definerer en punkteret kant. Vises som en ren linje i de fleste browsere.
dashed Definerer en streg med punkter. Vises som en ren linje i de fleste browsere.
solid Definerer en ren linje.
double Definerer dobbeltlinje. Bredden af dobbeltlinjen er lig med værdien af border-width.
groove Definerer 3D furet kant. Effekten afhænger af værdien af border-color.
ridge Definerer 3D ribbet kant. Effekten afhænger af værdien af border-color.
inset Definerer 3D inset-kant. Effekten afhænger af værdien af border-color.
outset Definerer 3D outset-kant. Effekten afhænger af værdien af border-color.
inherit Fastlægger, at kantstilen skal arves fra forældreelementet.

Beskrivelse

Den mest uforudsigelige kantstyle er double. Den defineres som to liners bredde plus mellemrummet mellem linjerne, der er lig med border-width-værdien. Dog siger CSS-specifikationen ikke, om en af linjerne er tykkere end den anden eller om linjerne skal have samme bredde, og den peger heller ikke på, om mellemrummet mellem linjerne skal være tykkere end linjerne. Alt dette bestemmes af brugeragenten, og skaberne har ingen indflydelse på denne beslutning.

Tekniske detaljer

Standardværdi: ikke specificeret
Arv: nej
Version: CSS1
JavaScript-syntaks: object.style.borderStyle="dotted double"

Flere eksempler

Indstil stilarter for fire kanter
Dette eksempel viser, hvordan man indstiller stilarter for fire kanter.
Indstil forskellige kantstilarter på hver kant
Dette eksempel viser, hvordan man sætter forskellige kantstilarter på elementets kanter.

Browser-understøttelse

Tallene i tabellen angiver den første browser-version, der fuldt ud understøtter egenskaben.

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