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.

À l'instar des autres propriétés raccourcies, toutes les valeurs qui ne sont pas explicitement utilisées dans la déclaration sont réinitialisées avec leur valeur initiale.

Bordures et contours

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

/* style */
outline: solid;

/* couleur | style */
outline: #f66 dashed;

/* style | épaisseur */
outline: inset thick;

/* couleur | style | épaisseur */
outline: green solid 3px;

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

La propriété outline peut être définie avec une, deux ou trois valeurs parmi celles listées ci-après. L'ordre de ces valeurs n'a pas d'importance.

Note : Si aucun style n'est défini, le contour sera invisble (car le style par défaut vaut none).

Valeurs

<'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

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

Accessibilité

Utiliser la propriété outline avec une valeur 0 ou none supprimera le style par défaut du navigateur pour le focus. Lorsqu'on interagit avec un élément, celui-ci doit avoir un indicateur visible. Aussi, veillez à fournir un tel indicateur si vous retirez le style par défaut pour le focus

Spécifications

Spécification Statut Commentaires
CSS Basic User Interface Module Level 3
La définition de 'outline' dans cette spécification.
Recommendation Aucun changement.
CSS Level 2 (Revision 1)
La définition de 'outline' dans cette spécification.
Recommendation Définition initiale.
Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments
Héritéenon
Médiapour chaque propriété individuelle de la propriété raccourcie :
  • visual: Valeur introuvable dans la base de données
  • interactive: Valeur introuvable dans la base de données
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 à rgba(0,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é
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniquel'ordre d'apparition dans la grammaire formelle des valeurs

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 1Edge Support complet 12Firefox Support complet 1.5
Notes
Support complet 1.5
Notes
Notes Firefox includes absolutely positioned elements inside the outline (see bug 687311).
Aucun support 1 — 3.6
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -moz-
IE Support complet 8Opera Support complet 7Safari Support complet 1.2WebView Android Support complet 1Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 4Opera Android Support complet 7Safari iOS Support complet 3.1Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

É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,