Proprietà outline-offset

La proprietà outline-offset imposta l'offset del contorno esterno - un bordo che non occupa spazio. I valori accettati dalla proprietà sono qualsiasi unità di misura per dimensioni, eccetto le percentuali. Valore predefinito: 0. Un valore positivo sposta il contorno verso l'esterno dell'elemento, uno negativo - verso l'interno.

Sintassi

selettore {
	outline-offset: valore;
}

Esempio . Valore positivo

Il contorno si allontana dall'elemento (evidenziato con lo sfondo):

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

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

Esempio . Valore negativo

Il contorno si trova all'interno dell'elemento:

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

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

Esempio . Valore negativo outline + border

Si può creare questo interessante effetto (fate attenzione allo spessore dello spazio bianco tra i bordi, è 10px, non 14, poiché una parte è stata "mangiata" dallo spessore di outline di 4px):

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

#elem {
	outline-offset: -14px;
	outline: 4px solid green;
	border: 4px solid red;
	width: 300px;
	height: 100px;
}

Vedi anche

la proprietà outline-width,
che imposta lo spessore del contorno
la proprietà outline-style,
che imposta lo stile del contorno
la proprietà outline-color,
che imposta il colore del contorno
la proprietà outline,
che è la proprietà shorthand per i contorni