Eigenschap border-style

De eigenschap border-style bepaalt de stijl van de rand voor alle zijden tegelijk of afzonderlijk voor elke zijde. Het is een verkorte eigenschap voor de volgende eigenschappen: border-left-style, border-right-style, border-top-style, border-bottom-style.

Syntaxis

selector {
	border-style: waarde;
}

Waarden

Waarde	Beschrijving
`solid`	Doorgetrokken lijn.
`dotted`	Rand als stippellijn.
`dashed`	Rand als streepjeslijn.
`ridge`	Rand als verhoogde lijn.
`double`	Rand als dubbele lijn. Om het effect te zien moet de randdikte minimaal `3px` zijn.
`groove`	Ingedaalde rand.
`inset`	Ingezette rand.
`outset`	Uitstekende rand.
`none`	Geen rand.

Standaardwaarde: none.

Aantal waarden

De eigenschap kan 1, 2, 3 of 4 waarden aannemen, gescheiden door een spatie:

Aantal	Beschrijving
`1`	Type voor alle zijden tegelijk.
`2`	Eerste waarde voor boven en onder, tweede - voor linker en rechter rand.
`3`	Eerste waarde voor boven, tweede - voor linker en rechter rand, derde - voor onderkant.
`4`	Eerste waarde voor bovenrand, tweede - voor rechterrand, derde - voor onderrand, vierde - voor linkerrand.

Voorbeeld . Waarde solid

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

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

Voorbeeld . Waarde dotted

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

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

Voorbeeld . Waarde dashed

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

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

Voorbeeld . Waarde ridge

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

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

Voorbeeld . Waarde double

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

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

Voorbeeld . Waarde groove

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

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

Voorbeeld . Waarde inset

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

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

Voorbeeld . Waarde outset

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

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

Voorbeeld

In dit voorbeeld zijn verschillende randtypes ingesteld voor verschillende zijden van het element:

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

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

Voorbeeld

En nu zijn voor verschillende zijden van het element ook verschillende randdiktes en kleuren ingesteld:

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

Voorbeeld

Nu is voor de boven- en onderrand het type solid ingesteld, en voor de rechter- en linkerrand - dotted:

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

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

Zie ook

eigenschap border-color,
die de kleur van de rand bepaalt
eigenschap border-width,
die de dikte van de rand bepaalt
eigenschap border,
die de verkorte eigenschap voor de rand is