La propriétéoutline estune propriété raccourcie qui permet de définir, dans une seule déclaration, une ou plusieurs des propriétés parmioutline-style,outline-width etoutline-color.

Exemple interactif

outline: solid;

outline: dashed red;

outline: 1rem solid;

outline: thick double #32a1ce;

outline: 8px ridge rgba(170, 50, 220, 0.6);border-radius: 2rem;

<section>  <div>    This is a box with an outline around it.  </div></section>

#example-element {  padding: 0.75rem;  width: 80%;  height: 100px;}

À 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 avecleur 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.

Valeurs

<'outline-width'>

Voiroutline-width.

<'outline-style'>

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

Syntaxe formelle

outline =
<'outline-width'>||
<'outline-style'>||
<'outline-color'>

<outline-width> =
<line-width>

<outline-style> =
auto|
<outline-line-style>

<outline-color> =
auto|
<'border-top-color'>

<line-width> =
<length [0,∞]>|
thin|
medium|
thick

<outline-line-style> =
none|
auto|
dotted|
dashed|
solid|
double|
groove|
ridge|
inset|
outset

<border-top-color> =
<color>|
<image-1D>

<image-1D> =
<stripes()>

<stripes()> =
stripes(<color-stripe>#)

<color-stripe> =
<color>&&
[<length-percentage>|<flex>]?

<length-percentage> =
<length>|
<percentage>

Exemples

Exemple simple

HTML

<p>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>  petit texte  <span>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 valeur0 ounone 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

• :focus
• Comment concevoir des indicateurs de focus utiles et utilisables (en anglais)
• Understanding Success Criterion 2.4.7 | Understanding WCAG 2.0 (en anglais)

Spécifications

Compatibilité des navigateurs