mask-border-source

Disponibilité limitée

Cette fonctionnalité n'est pas Compatible car elle ne fonctionne pas dans certains des navigateurs les plus utilisés.

La propriété CSS mask-border-source définit l'image source à utiliser pour créer le masque de bordure d'un élément.

C'est la propriété mask-border-slice qui est utilisée afin de découper l'image en tranches/régions ensuite appliquées dynamiquement pour créer le masque final.

Syntaxe

css

/* Valeur avec un mot-clé */
mask-border-source: none;

/* Valeurs de type <image> */
mask-border-source: url("image.jpg");
mask-border-source: linear-gradient(to top, red, yellow);

/* Valeurs globales */
mask-border-source: inherit;
mask-border-source: initial;
mask-border-source: revert;
mask-border-source: revert-layer;
mask-border-source: unset;

Valeurs

none: Aucun masque de bordure n'est utilisé.
<image>: Une référence vers une image qu'on utilise pour le masque de la bordure.

Définition formelle

Valeur initiale	`none`
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
Valeur calculée	comme défini, mais avec les valeurs `url()` rendues absolues
Type d'animation	discrète

Syntaxe formelle

mask-border-source = 
  none     |
  <image>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>

Exemples

Utilisation simple

Cette propriété ne semble pas encore être prise en charge nulle part. Lorsqu'elle commencera à être prise en charge, elle servira à définir la source du masque de bordure.

css

mask-border-source: url("image.jpg");

Les navigateurs basés sur Chromium prennent en charge une version obsolète de cette propriété — mask-box-image-source — avec un préfixe :

css

-webkit-mask-box-image-source: url("image.jpg");

Note : La page mask-border propose un exemple fonctionnel (utilisant les propriétés de masque de bordure préfixées obsolètes prises en charge par Chromium), afin que vous puissiez vous faire une idée de l'effet.

Spécifications

Spécification
CSS Masking Module Level 1 # the-mask-border-source

Compatibilité des navigateurs

Voir aussi

La propriété raccourcie mask-border
La propriété mask-border-mode
La propriété mask-border-outset
La propriété mask-border-repeat
La propriété mask-border-width

Aider à améliorer MDN

Apprendre à contribuer

Cette page a été modifiée le 21 mars 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu