Mask-border-source - Propriété CSS
Résumé des caractéristiques de la propriété mask-border-source
SVG : conteneurs sauf defs, éléments graphiques, use.
nonemask-border-source passe d'une valeur à l'autre sans transition.Schéma de la syntaxe de mask-border-source.
mask-border-source.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Description de la propriété mask-border-source.
mask-border-source est encore mal reconnues par les navigateurs. Sur les navigateurs basés sur webkit, il y a une propriété
équivalente préfixée par -webkit-. Il s'agit de -webkit-mask-box-source.
Sur Firefox 
il n'y a pas d'équivalence.
Le masquage des bordures consiste à masquer le pourtour de l'image suivant un masque. Ce masque est divisé en 9 parties qui s'agrandissent ou se répètent
différemment les unes des autres. Voir mask-border pour davantage de précision.
mask-border-source définit quel est le masque à utiliser. Si l'image est absente ou est dans un format non reconnu, le masque ne s'applique pas.
Si un masque est également appliqué à l'élément (voir à ce sujet la propriété mask), les deux masques sont appliqués dans un ordre quelconque,
le résultat étant identique quelque soit l'ordre.
Voici les propriétés qui jouent un rôle dans les masques de bordure :
Valeurs pour mask-border-source.
- mask-border-source: none;
Aucun masque de bordure n'est appliqué.
- mask-border-source: url(...)
Avec cette syntaxe
mask-border-sourcedéfinit quelle image sera utilisée en tant que masque. Pour que le résultat soit conforme aux attentes, il sera nécessaire de définit également la propriétémask-border-slice.Rappelons que l'image choisie sera divisée en 9 parties : une pour chacun des quatre angles, une pour chacun des quatre bords et une pour la partie centrale de l'élément, conformément au dessin ci-dessous.
- mask-border-source: initial; (
none) mask-border-source: inherit; mask-border-source: revert; mask-border-source: revertLayer; mask-border-source: unset;Consultez les pages suivantes pour plus de détails :
initial,inherit,revert,revert-layer,unset.
Exemple d'animation de mask-border-source.
La propriété mask-border-source peut être animée, de façon discrète, c'est à dire avec passage brutal d'une valeur à l'autre.
Néanmoins certains navigateurs comme Edge 
, Chrome 
, etc. enchaîne les images avec un fondu.
L'exemple alterne les deux masques ci-dessous.
L'animation ne fonctionne pas sous Firefox , et pour les autres navigateurs, nous avons utilisé la propriété non standard
-webkit-mask-box-image-source.
Compatibilité des navigateurs avec mask-border-source.
Les navigateurs ne traitent pas encore suffisamment la technique de masquage par bordure (2025). Firefox en particulier ne reconnaît aucune des propriétés.
Sur les autres navigateurs, vous pouvez utiliser provisoire la propriété -webkit-mask-box-image-slice en remplacement de mask-border-source.
mask-border-source qui définit quel masque utiliser pour les bordures.Remarques :
(1) La propriété n'est pas encore reconnue : utilisez -webkit-mask-box-image-source à la place.
mask-border-sourceNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
UC Browser pour Androïd
Opéra Mobile
QQ Browser
Baidu Browser
Safari
Safari sur IOS
Samsung Internet
Firefox
Androïd Brower
Firefox pour Androïd
Chrome pour Androïd
Chrome
Edge
Opéra
KaiOS Browser
Opéra mini
Histoire de la propriété mask-border-source.
-
Module CSS - Masquage - Niveau 1
Introduction de la propriétémask-border-sourceainsi que des autres propriété relatives au masquage des bordures.
15 Novembre 2012Document de travail.
26 Août 2014Candidat à la recommandation.
Voir aussi, au sujet des techniques de masquage.
Les propriétés relatives au masque de bordures sont publiés dans {CSS Masking Module, tout comme les propriétés relatives au masquage classique des éléments.