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

csssé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) :

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

css#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 :

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

css#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) :

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

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

Результат:

Voir aussi