Egenskapen border-style

Egenskapen border-style setter stilen på kanten for alle sider samtidig eller separat for hver side. Er en sammensatt egenskap for følgende egenskaper: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntaks

velger {
	border-style: verdi;
}

Verdier

Verdi	Beskrivelse
`solid`	Heltrukket linje.
`dotted`	Kant som prikker.
`dashed`	Kant som streker.
`ridge`	Kant som en utstående linje.
`double`	Kant som en dobbel linje. For å se effekten må kanttykkelsen være minst `3px`.
`groove`	Innskåret kant.
`inset`	Innpresset kant.
`outset`	Utstående kant.
`none`	Ingen kant.

Standardverdi: none.

Antall verdier

Egenskapen kan ta 1, 2, 3 eller 4 verdier, angitt mellom mellomrom:

Antall	Beskrivelse
`1`	Type for alle sider samtidig.
`2`	Første verdi for topp og bunn, andre - for venstre og høyre kant.
`3`	Første verdi for topp, andre - for venstre og høyre kant, tredje - for bunn.
`4`	Første verdi for toppkant, andre - for høyre kant, tredje - for bunnkant, fjerde - for venstre kant.

Eksempel . Verdien solid

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid;
	border-color: black;
	width: 300px;
	height: 100px;
}

Eksempel . Verdien dotted

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Eksempel . Verdien dashed

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: dashed;
	border-color: black;
	width: 300px;
	height: 100px;
}

Eksempel . Verdien ridge

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: ridge;
	border-color: black;
	width: 300px;
	height: 100px;
}

Eksempel . Verdien double

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: double;
	border-color: black;
	width: 300px;
	height: 100px;
}

Eksempel . Verdien groove

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: groove;
	border-color: black;
	width: 300px;
	height: 100px;
}

Eksempel . Verdien inset

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: inset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Eksempel . Verdien outset

<div id="elem"></div>

#elem {
	border-width: 3px;
	border-style: outset;
	border-color: black;
	width: 300px;
	height: 100px;
}

Eksempel

I dette eksemplet er det satt ulike kanttyper for ulike sider av elementet:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted dashed dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Eksempel

Og nå for ulike sider av elementet er det også satt ulik kanttykkelse og farge:

<div id="elem"></div>

#elem {
	border-width: 1px 2px 3px 4px;
	border-style: dashed dotted solid double;
	border-color: red blue green black;
	width: 300px;
	height: 100px;
}

Eksempel

Nå for topp- og bunnkant er det satt typen solid, og for høyre og venstre - dotted:

<div id="elem"></div>

#elem {
	border-width: 1px;
	border-style: solid dotted;
	border-color: black;
	width: 300px;
	height: 100px;
}

Se også

egenskapen border-color,
som setter fargen på kanten
egenskapen border-width,
som setter tykkelsen på kanten
egenskapen border,
som er en sammensatt egenskap for kanten