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

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


```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. Voir `outline-color`.

Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `outline-color`: `auto`
* `outline-style`: `none`
* `outline-width`: `medium`
 |
| Applicabilité | tous les éléments |
| Héritée | non |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `outline-color`: Pour le mot-clé `auto`, la valeur calculée est `currentcolor`. 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'animation | pour chaque propriété individuelle de la propriété raccourcie :* `outline-color`: une couleur
* `outline-width`: une longueur
* `outline-style`: by computed value type
 |

Syntaxe formelle
----------------
```

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

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

* `: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
--------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.