Opdateret d. 6.6.2002

border-style

Mulige værdier:	<'border-top-style'>, <'border-right-style'>, <'border-bottom-style'>, <'border-left-style'>
Brug af værdier:	Ét eller flere af ovenstående egenskaber defineres.
Benyttes med:	Alle HTML koder

Med border-style kan man angive én eller flere stilarter for kanterne af en boks. Som med border-color er rækkefølgen hvormed værdien for egenskaberne angives, ikke ligegyldig.

Bemærk at de enkelte værdier kun er adskilt af et mellemrum.

Eksempel på brug af egenskaben border-style

H3 { border-style: solid dotted }

Overskrift

Herunder kan du se hvad det indebærer, alt efter hvor mange stilarter der angives. Du kan samtidig se hvordan de enkelte stilarter ser ud: (Hvorvidt du kan se de enkelte stilarter, afhænger helt af din browser)

Eksempel på stilarten hidden

TABLE {border-style: hidden}

Gælder for både top, bund, venstre og højre kant

Eksempel på stilarterne none og dotted

TABLE {border-style: none dotted}

none gælder på top og bund
dotted gælder på højre og venstre kant

Eksempel på stilarterne dashed, solid og double

TABLE {border-style: dashed solid double}

dashed gælder på øverste kant
solid gælder på højre og venstre kant
double gælder for bunden

Der findes 4 muligheder mere, nemlig groove, ridge, inset og outset. Disse demonstreres imidlertid bedste når det benyttes på alle fire kanter.

Eksempel på stilarterne groove, ridge, inset og outset

TABLE {border-style:groove}

groove på alle kanter

TABLE {border-style:ridge}

ridge på alle kanter

TABLE {border-style:inset}

inset på alle kanter

TABLE {border-style:outset}

outset på alle kanter

Herunder kan du se rækkefølgen:

H1 { border-style: top højre bund venstre }

Egenskaberne under "Mulige værdier" i tabellen øverst på siden, er ikke forklaret andet steds i denne vejledning.
Du bruger dem hvis du kun vil angive stilen på en enkelt kant. Hvis eksempelvis kun den øverste kant skal være stiplet, vælges border-top-style, som vist her:

Eksempel på brug af egenskaben border-top-style

H1 { border-top-style: dashed }