outline-offset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.

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

outline-offset: 4px;

outline-offset: 0.6rem;

outline-offset: 12px;
outline: 5px dashed blue;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box with an outline around it.
  </div>
</section>

#example-element {
  border: 2px solid crimson;
  outline: 0.75em solid;
  padding: 0.75em;
  width: 80%;
  height: 100px;
}

Syntaxe

css

/* 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.

Définition formelle

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

Syntaxe formelle

outline-offset = 
  <length>

Exemples

CSS

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

html

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

Résultat

Spécifications

Specification
CSS Basic User Interface Module Level 4 # outline-offset