border-image-outset
===================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

* Learn more
* See full compatibility
* Report feedback
La propriété **`border-image-outset`** définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure.

Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'évènements de pointeur par rapport à l'élément concerné.

Exemple interactif
------------------

Syntaxe
-------


```css
/\* Longueur \*/
/\* Type <length> \*/
border-image-outset: 1rem;

/\* Valeur numérique \*/
/\* Type <number> \*/
border-image-outset: 1.5;

/\* côtés verticaux | horizontaux \*/
border-image-outset: 1 1.2;

/\* haut | côtés horizontaux | bas \*/
border-image-outset: 30px 2 45px;

/\* haut | droit | bas | gauche \*/
border-image-outset: 7px 12px 14px 5px;

/\* Valeurs globales \*/
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: revert;
border-image-outset: unset;
```


La propriété `border-image-outset` peut être définie à l'aide d'une, deux, trois ou quatre valeurs. Chaque valeur est une longueur (`<length>`) ou un nombre (`<number>`). Les valeurs négatives sont invalides (la déclaration est alors ignorée).

1. Si **une** valeur est indiquée, elle s'applique **aux quatre côtés**.
2. Si **deux** valeurs sont indiquées, la première s'applique aux côtés **haut et bas** et la seconde s'applique aux côtés **gauche et droit**.
3. Si **trois** valeurs sont indiquées, la première s'applique au côté **haut**, la deuxième aux côtés **gauche et droit**, et la troisième au côté **bas**.
4. Si **quatre** valeurs sont indiquées, elles s'appliquent dans le sens des aiguilles d'une montre : la première au côté **haut**, la seconde au côté **droit**, la troisième au côté **bas**, et la quatrième au côté **gauche**.
### Valeurs

`<length>`

Une valeur de longueur (cf. type `<length>`) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées.

`<number>`

Une valeur numérique (cf. type `<number>`) qui sera multipliée par la valeur calculée de `border-width` afin de déterminer la longueur de l'espace duquel dépasser.

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

|  |  |
| --- | --- |
| Valeur initiale | `0` |
| Applicabilité | tous les éléments sauf les éléments de table internes lorsque `border-collapse` vaut `collapse`. S'applique aussi à `::first-letter`. |
| Héritée | non |
| Valeur calculée | comme spécifié, mais avec les longueurs relatives converties en longueurs absolues |
| Type d'animation | by computed value type |

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

border-image-outset =   
  [ <length [0,∞]> | <number [0,∞]> ]{1,4}    
  
```

Exemples
--------

### Décaler la bordure d'une image

#### HTML


```html
<div id="outset">Un élément avec une bordure décalée !</div>
```


#### CSS


```css
#outset {
  width: 10rem;
  background: #cef;
  border: 1.4rem solid;
  border-image: radial-gradient(#ff2, #55f) 40;
  border-image-outset: 1.5; /\* 1.5 × 1.4rem = 2.1rem \*/
  margin: 2.1rem;
}
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-outset |

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

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

Voir aussi
----------

* Les arrière-plans et bordures
* Apprendre le CSS : les arrière-plans et les bordures