Egenskapen border-style

Egenskapen border-style sätter stilen för kantlinjen på alla sidor samtidigt eller separat för varje sida. Är en genvägsegenskap för följande egenskaper: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntax

selektor {
	border-style: värde;
}

Värden

Värde	Beskrivning
`solid`	Heldragen linje.
`dotted`	Kantlinje som punkter.
`dashed`	Kantlinje som streck.
`ridge`	Kantlinje som en utskjutande linje.
`double`	Kantlinje som en dubbel linje. För att se effekten måste kantlinjens tjocklek vara minst `3px`.
`groove`	Urgröpt kantlinje.
`inset`	Nedtryckt kantlinje.
`outset`	Utskjutande kantlinje.
`none`	Ingen kantlinje.

Standardvärde: none.

Antal värden

Egenskapen kan ta 1, 2, 3 eller 4 värden, angivna mellan mellanslag:

Antal	Beskrivning
`1`	Typ för alla sidor samtidigt.
`2`	Första värdet för toppen och botten, andra - för vänster och höger kantlinjer.
`3`	Första värdet för toppen, andra - för vänster och höger kantlinjer, tredje - för botten.
`4`	Första värdet för den övre kantlinjen, andra - för den högra, tredje - för den nedre, fjärde - för den vänstra kantlinjen.

Exempel . Värdet solid

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

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

Exempel . Värdet dotted

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

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

Exempel . Värdet dashed

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

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

Exempel . Värdet ridge

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

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

Exempel . Värdet double

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

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

Exempel . Värdet groove

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

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

Exempel . Värdet inset

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

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

Exempel . Värdet outset

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

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

Exempel

I detta exempel är olika typer av kantlinjer satta för olika sidor av elementet:

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

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

Exempel

Och nu för olika sidor av elementet är även olika kantlinjetjocklekar och dess färg satta:

<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;
}

Exempel

Nu för den övre och nedre kantlinjen är typen solid satt, och för den högra och vänstra - dotted:

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

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

Se även

egenskapen border-color,
som sätter färgen på kantlinjen
egenskapen border-width,
som sätter tjockleken på kantlinjen
egenskapen border,
som är en genvägsegenskap för kantlinjen