mask-border
===========

La propriété CSS **`mask-border`** est une propriété raccourcie qui permet de créer un masque le long de la bordure d'un élément.

Propriétés détaillées correspondantes
-------------------------------------

Cette propriété est une propriété raccourcie pour les propriétés suivantes :

* `mask-border-mode`.
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-slice`
* `mask-border-source`
* `mask-border-width`
Syntaxe
-------


```css
/\* source | slice \*/
mask-border: url("border-mask.png") 25;

/\* source | slice | repeat \*/
mask-border: url("border-mask.png") 25 space;

/\* source | slice | width \*/
mask-border: url("border-mask.png") 25 / 35px;

/\* source | slice | width | outset | repeat | mode \*/
mask-border: url("border-mask.png") 25 / 35px / 12px space alpha;

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

### Valeurs

`<'mask-border-source'>`

L'image source. Voir `mask-border-source`.

`<'mask-border-slice'>`

Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir `mask-border-slice`.

`<'mask-border-width'>`

La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir `mask-border-width`.

`<'mask-border-outset'>`

La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir `mask-border-outset`.

`<'mask-border-repeat'>`

Cette valeur indique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir `mask-border-repeat`.

`<'mask-border-mode'>`

Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir `mask-border-mode`.

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

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `mask-border-mode`: `alpha`
* `mask-border-outset`: `0`
* `mask-border-repeat`: `stretch`
* `mask-border-slice`: `0`
* `mask-border-source`: `none`
* `mask-border-width`: `auto`
 |
| Applicabilité | tous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments `defs` et des éléments graphiques |
| Héritée | non |
| Pourcentages | pour chaque propriété individuelle de la propriété raccourcie :* `mask-border-slice`: refer to size of the mask border image
* `mask-border-width`: relative to width/height of the mask border image area
 |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `mask-border-mode`: comme spécifié
* `mask-border-outset`: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues
* `mask-border-repeat`: comme spécifié
* `mask-border-slice`: comme spécifié
* `mask-border-source`: comme spécifié mais avec les valeurs `url` rendues absolues
* `mask-border-width`: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues
 |
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :* `mask-border-mode`: discrète
* `mask-border-outset`: discrète
* `mask-border-repeat`: discrète
* `mask-border-slice`: discrète
* `mask-border-source`: discrète
* `mask-border-width`: discrète
 |
| Crée un contexte d'empilement | oui |

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

mask-border =   
  <'mask-border-source'>                              ||  
  <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]?  ||  
  <'mask-border-repeat'>                              ||  
  <'mask-border-mode'>                                  
  
```

Exemples
--------

### Image matricielle (*bitmap*)

Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :

![](/fr/docs/Web/CSS/mask-border/mask-border-diamonds.png)

Pour avoir un seul losange, on divise le carré en 3 (avec la valeur `30`). On utilise la valeur `round` pour que le masque soit réparti également de part et d'autre.

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-mask-border |

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

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

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

* `mask-border-mode`
* `mask-border-outset`
* `mask-border-repeat`
* `mask-border-source`
* `mask-border-width`