outline-offset

La propriété outline-offset définit l'espace qu'il y a entre la bordure dessinée par outline et le bord de la boîte de bordure d'un élément. Cet espace est transparent et la couleur visible en arrière-plan sera déterminée par l'élément parent.

Exemple interactif

Syntaxe

/* Valeurs de longueur */
/* Type <length>       */
outline-offset: 3px;
outline-offset: 0.2em;

/* Valeurs globales */
outline-offset: inherit;
outline-offset: initial;
outline-offset: unset;

Valeurs

<length>: La largeur de l'espace, voir la page <length> pour plus d'informations. Les valeurs négatives sont utilisées et font que la bordure dessinée est dessinée dans l'élément.

Syntaxe formelle

<length>

Exemples

CSS

.exemple {
  outline: 1px dashed red;
  /* On décale la ligne de 10px */
  outline-offset: 10px;
  background: yellow;
  margin: 15px;
  border: 1px solid black;
}

HTML

<p class="exemple">La bordure est décalée<p>

Résultat

Spécifications

Spécification	Statut	Commentaires
CSS Transitions La définition de 'outline-offset' dans cette spécification.	Version de travail	`outline-offset` peut désormais être animée.
CSS Basic User Interface Module Level 3 La définition de 'outline-offset' dans cette spécification.	Recommendation	Définition initiale.

Valeur initiale	`0`
Applicabilité	tous les éléments
Héritée	non
Valeur calculée	comme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animation	une longueur

Compatibilité des navigateurs

BCD tables only load in the browser