Proprietà border-image-outset

La proprietà border-image-outset consente di spostare il bordo oltre i limiti dell'elemento. Come valore viene indicato un numero senza specificare unità di misura oppure qualsiasi unità per dimensioni, eccetto le percentuali. Se viene indicato un numero senza unità, allora è un moltiplicatore, per il quale viene moltiplicato il valore della proprietà border-width. I valori negativi non sono supportati.

Per informazioni più dettagliate sulle immagini per il bordo consulta la proprietà border-image.

Sintassi

selettore {
	border-image-outset: numero positivo;
}

Esempio . Numero

Impostiamo il valore di border-image-outset a 3 al passaggio del mouse sull'elemento. In questo caso il bordo si sposterà di 26px*3 - 3 volte più lontano della sua larghezza, impostata in 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;
}

Esempio . Pixel

Impostiamo il valore di border-image-outset a 30px al passaggio del mouse sull'elemento. In questo caso il bordo si sposterà di 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;
}

Vedi anche

la proprietà border-image,
che è una forma abbreviata per il bordo-immagine
la proprietà border-image-source,
che imposta il percorso dell'immagine per il bordo
la proprietà border-image-slice,
che divide l'immagine per il bordo
la proprietà border-image-repeat,
che ripete l'immagine per il bordo
la proprietà border-image-width,
che imposta la dimensione dell'immagine per il bordo