Eigenschap border-image-outset

De eigenschap border-image-outset maakt het mogelijk de rand buiten het element te plaatsen. Als waarde wordt een getal zonder meeteenheid opgegeven of een willekeurige meeteenheid voor afmetingen, met uitzondering van percentages. Als een getal zonder eenheid is opgegeven, is het een vermenigvuldiger waarmee de waarde van de eigenschap border-width wordt vermenigvuldigd. Negatieve waarden worden niet ondersteund.

Voor meer gedetailleerde informatie over afbeeldingen voor randen, zie de eigenschap border-image.

Syntaxis

selector {
	border-image-outset: positief getal;
}

Voorbeeld . Getal

Stel de waarde van border-image-outset in op 3 bij het zweven met de muis over het element. Hierdoor verschuift de rand met 26px*3 - 3 keer verder dan de breedte die is ingesteld met border-width:

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

#elem:hover {
	border-image-outset: 3;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 100px auto;
}

Voorbeeld . Pixels

Stel de waarde van border-image-outset in op 30px bij het zweven met de muis over het element. Hierdoor verschuift de rand met 30px:

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

#elem:hover {
	border-image-outset: 30px;
}
#elem {
	border-image-repeat: repeat;
	border-image-source: url("image.png");
	border-image-slice: 26;
	border-style: solid;
	border-width: 26px;
	width: 200px;
	height: 200px;
	background: green;
	margin: 50px auto;
}

Zie ook

de eigenschap border-image,
dat een korte notatie is voor een randafbeelding
de eigenschap border-image-source,
dat het pad naar de afbeelding voor de rand instelt
de eigenschap border-image-slice,
dat de opdeling van de afbeelding voor de rand instelt
de eigenschap border-image-repeat,
dat de herhaling van de afbeelding voor de rand instelt
de eigenschap border-image-width,
dat de grootte van de afbeelding voor de rand instelt