Outline-offset - Propriété CSS

Description de la propriété outline-offset.

La propriété outline-offset définit l'espace entre le contour et l'élément. Pour plus de précisions sur les contours, reportez-vous à la propriété outline.

Voici sur 3 exemples l'effet de outline-offset (le contour est le trait en vert) :

Valeurs pour outline-offset.

• outline-offset: 5px;

  L'espace entre le contour et l'élément est déterminé par la valeur indiquée. C'est une valeur positive ou négative, suivie d'une unité de dimension Voir les unités de dimension. Les pourcentages ne sont pas acceptés.

  Par défaut, le contour est collé à l'élément, sans espace.

  Si une valeur négative est indiquée et se trouve supérieure à une des dimensions de l'élément, par exemple sa hauteur, la valeur de l'offset sera réduite pour que le contour reste affichable.

• outline-offset: initial; (0) outline-offset: inherit; outline-offset: revert; outline-offset: revertLayer; outline-offset: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de outline-offset.

L'effet ci-dessous a té obtenu en animant les propriétés outline-offset et outline-color. La forme circulaire est un élément div carré, avec un arrondi de 50% dans chacun des angles.

Exemple interactif avec la propriété outline-offset.

Ajustez la valeur de outline-offset et observez le résultat ci-dessous. Le simulateur applique l'offset sur un élément du type block et sur un élément du type inline. Rappelons que les valeurs négatives sont acceptées, mais pas les pourcentages.

Compatibilité des navigateurs avec outline-offset.

Tous les navigateurs actuels reconnaissent et traitent correctement la propriété outline-offset.

Remarques :

(1) Supporte aussi la valeur invert pour la propriété outline-color.
Ne supporte pas la propriété outline-offset.

1

Prise en charge
des contours

2

Propriété
outline-offset

Estimation de la prise en charge globale.

96%

95%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Opéra

Firefox pour Androïd

Samsung Internet

Chrome

Edge

Firefox

Androïd Brower

Chrome pour Androïd

Baidu Browser

QQ Browser

Safari

Safari sur IOS

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Histoire de la propriété outline-offset.

• Module CSS - Interface utilisateur de base - Niveau 3

  Introduction de la propriété outline-offset dans le niveau 3 de la spécification.
  

  02 Août 2002

  Document de travail.

  

  07 Juillet 2015

  Candidat à la recommandation.

  

  14 Décembre 2017

  Proposé à la recommandation.

  

  21 Juin 2018

  Recommandation.

• Module CSS - Interface utilisateur de base - Niveau 4

  Pas de changement concernant la propriété outline-offset.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, au sujet de l'interface utilisateur.

Les spécifications éditées par le W3C sont organisées en modules. La propriété outline-offset fait partie du module CSS - Interface utilisateur de base (CSS Basic User Interface Module ). Les définitions suivantes sont également décrites dans ce même module.

Propriétés :