Egenskaben border-style

Egenskaben border-style angiver stilen for kanter på alle sider samtidigt eller separat for hver side. Er en sammentrækningsegenskab for følgende egenskaber: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntaks

selektor {
	border-style: værdi;
}

Værdier

Værdi	Beskrivelse
`solid`	Uafbrudt linje.
`dotted`	Kant som prikker.
`dashed`	Kant som stiplet linje.
`ridge`	Kant som en fremspringende linje.
`double`	Kant som dobbelt linje. For at se effekten skal kanttykkelsen være mindst `3px`.
`groove`	Indadgående kant.
`inset`	Indsat kant.
`outset`	Udadgående kant.
`none`	Ingen kant.

Standardværdi: none.

Antal værdier

Egenskaben kan tage 1, 2, 3 eller 4 værdier, angivet med mellemrum:

Antal	Beskrivelse
`1`	Type for alle sider samtidigt.
`2`	Første værdi for top og bund, anden - for venstre og højre kanter.
`3`	Første værdi for top, anden - for venstre og højre kanter, tredje - for nederste.
`4`	Første værdi for den øverste kant, anden - for den højre, tredje - for den nederste, fjerde - for den venstre kant.

Eksempel . Værdien solid

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

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

Eksempel . Værdien dotted

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

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

Eksempel . Værdien dashed

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

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

Eksempel . Værdien ridge

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

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

Eksempel . Værdien double

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

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

Eksempel . Værdien groove

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

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

Eksempel . Værdien inset

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

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

Eksempel . Værdien outset

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

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

Eksempel

I dette eksempel er der angivet forskellige kanttyper for forskellige sider af elementet:

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

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

Eksempel

Og nu er der også angivet forskellig kanttykkelse og farve for forskellige sider af elementet:

<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

Nu er der for den øverste og nederste kant angivet typen solid, og for den højre og venstre - dotted:

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

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

Se også

egenskaben border-color,
som angiver kantfarven
egenskaben border-width,
som angiver kanttykkelsen
egenskaben border,
som er en sammentrækningsegenskab for kanten