outline

La propriété outline est une propriété raccourcie qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmi outline-style, outline-width et outline-color. Dans la plupart des cas, on utilisera cette propriété raccourcie qui est plus pratique à mettre en œuvre.

Les contours (outline) diffèrent des bordures, notamment sur les points suivants :

• Les contours ne prennent pas d'espace et sont dessinés au-dessus du contenu.
• Les contours peuvent avoir une forme qui n'est pas rectangulaire. Ils seront rectangulaires avec Gecko et Firefox mais Opera dessinera une forme autour du contenu (cf. exemples).

Syntaxe

/* largeur | style | couleur */
outline: 1px solid white;

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

Valeurs

Une, deux ou trois valeurs, dans un ordre arbitraire :

<'outline-width'>

Voir outline-width.

<'outline-style'>

Voir outline-style.

<'outline-color'>

Depuis Gecko 1.9 (Firefox 3), la valeur de la propriété color de l'élément est utilisée. Voir outline-color.

Syntaxe formelle

[ <'outline-color'> || <'outline-style'> || <'outline-width'> ]

Exemples

Exemple simple

HTML

<p class="exemple">Je suis entouré de tirets rouges</p>

CSS

.exemple {
  outline: dashed red 2px;
  /* on aurait pu utiliser          */
  /* les trois propriétés unitaires */
  /* et avoir le même résultat      */
}

Résultat

Exemple de contour non rectangulaire (Opera)

HTML

<p class="exemple">
  petit texte
    <span class=grand>Grand Texte</span>
  petit texte
</p>

CSS

.exemple {
  outline: dotted orange 1px;
}

.grand {
  font-size:xx-large;
}

Résultat

Spécifications

Compatibilité des navigateurs

[1] Dans les versions de Gecko antérieures à la version 1.8 (Firefox 1.5), on pouvait utiliser la propriété préfixée -moz-outline. Firefox inclut les éléments positionnés de façon absolue à l'intérieur du contour (bug 687311).