Eigenschap outline-style

De eigenschap outline-style bepaalt de stijl van de externe rand - een grens die geen ruimte inneemt.

Syntaxis

selector {
	outline-style: waarde;
}

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.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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