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).
Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments
Héritéenon
Médiavisuel, interactif
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
  • outline-color: Pour le mot-clé invert, la valeur calculée est invert. Pour la valeur de la couleur, si la valeur est transparente, la valeur calculée sera la valeur rgba() correspondante. S'il n'y en a pas, ce sera la valeur rgb() correspondante. Le mot-clé transparent correspondra à rgb(0,0,0).
  • outline-width: une longueur absolue ; si le mot-clé none est spécifié, la valeur calculée sera 0
  • outline-style: comme spécifié
Animablepour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

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

Spécification Statut Commentaires
CSS Basic User Interface Module Level 3
La définition de 'outline' dans cette spécification.
Candidat au statut de recommandation Aucun changement.
CSS Level 2 (Revision 1)
La définition de 'outline' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 1.0 1.5 (1.8)[1] 8.0 7.0 1.2 (125)
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple 1.0 1.0 (1.8) [1] 8.0 6.0 3.1

[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).

Étiquettes et contributeurs liés au document

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