Propriété CSS outline-offset

La propriété outline-offset spécifie l'espace entre la bordure (outline) et le bord d'un élément.

La propriété outline-offset ne fait pas une partie de la propriété raccourcie outline. Ça doit être spécifié séparément.

Valeur initiale	0
Appliquée à	Tous les éléments.
Héritée	Non.
Animable	Oui. La largeur de l'espace est animable.
Version	CSS3
Syntaxe DOM	object.style.outlineOffset = "20px";

Syntaxe

outline-offset: length | initial | inherit;

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style> 
      div.ex1 {
      margin: 20px;
      border: 2px dotted #000;
      background-color: #8ebf42;
      outline: 4px solid #666;
      outline-offset: 10px;
      }  
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété outline-offset</h2>
    <div class="ex1">Outline-offset est 10px</div>
  </body>
</html>

Essayez-vous-même!

Dans l'exemple donné, l'espace entre la bordure et le bord est de 10px.

Valeurs

Valeur	Description
length	L'espace entre la bordure et le bord de l'élément. La valeur initiale est 0.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.