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
.
Exemple interactif
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
css
/* 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 invisible (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. Voiroutline-color
.
Définition formelle
Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | tous les éléments |
Héritée | non |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
Syntaxe formelle
Exemples
Exemple simple
HTML
html
<p class="exemple">Je suis entouré de tirets rouges</p>
CSS
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
html
<p class="exemple">
petit texte
<span class="grand">Grand Texte</span>
petit texte
</p>
CSS
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
Specification |
---|
CSS Basic User Interface Module Level 4 # outline |
Compatibilité des navigateurs
BCD tables only load in the browser