Propriété outline-offset

La propriété outline-offset définit le décalage du contour extérieur - une bordure qui ne prend pas d'espace. Toutes les unités de taille sont acceptées comme valeur, sauf les pourcentages. La valeur par défaut est : 0. Une valeur positive décale le contour vers l'extérieur de l'élément, une valeur négative - vers l'intérieur.

Syntaxe

sélecteur {
	outline-offset: valeur;
}

Exemple . Valeur positive

Le contour est décalé de l'élément (celui-ci est mis en évidence par un fond) :

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

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

Exemple . Valeur négative

Le contour se trouve à l'intérieur de l'élément :

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

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

Exemple . Valeur négative outline + border

On peut créer cet effet intéressant (remarquez l'épaisseur de l'espace blanc entre les bordures, il est de 10px, et non de 14, car une partie a été "mangée" par l'épaisseur du outline de 4px) :

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

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

Voir aussi

la propriété outline-width,
qui définit l'épaisseur du contour
la propriété outline-style,
qui définit le style du contour
la propriété outline-color,
qui définit la couleur du contour
la propriété outline,
qui est la propriété raccourcie pour les contours