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.

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 initiale0
Applicabilitétous les éléments
Héritéenon
Médiapour chaque propriété individuelle de la propriété raccourcie :
  • visual: Valeur introuvable dans la base de données
  • interactive: Valeur introuvable dans la base de données
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationune longueur
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 1Edge ? Firefox Support complet 1.5IE Aucun support NonOpera Support complet 9.5Safari Support complet 1.2WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, mrstork, fscholz, Sebastianz, teoli, Manumanu, FredB, Kyodev, Fredchat
Dernière mise à jour par : SphinxKnight,