Mask-border - Propriété CSS

Description de la propriété mask-border.

⚠

Toutes les propriétés relatives au masquage des bords sont mal reconnues par les navigateurs actuels (2026). Sur Firefox   le fonctionnement est pour l'instant tout à fait impossible. Sur les navigateurs utilisant webkit, nous avons utilisé les propriétés équivalentes commençant par -webkit-mask-box pour que les exemples fonctionnent.

La propriété mask-border est une propriété résumée qui définit tous les paramètres de masquage des bordures.

La différence entre le masquage des bords et le masquage classique (voir la propriété mask) réside dans la façon dont le masque s'adapte aux dimensions de l'élément à masquer : avec un masquage classique on ne peut que répéter ou agrandir le masque afin de lui faire couvrir tout l'élément à masquer. Le masquage des bords est plus subtil : seuls les parties du masque associées au côtés de l'élément sont agrandies ou répétées pour s'adapter à la longueur ou à la largeur de l'élément.
mask-border permet de définir un masque pour chaque angle, un pour chaque côté, et enfin un pour l'intérieur de l'élément.

Toutes ces parties de masque sont regroupées en une seule image, divisée en 9 parties, pas nécessairement de mêmes dimensions.

Masque pour le coin en haut à gauche.

Masque pour le bord supérieur.

Masque pour le coin
en haut à droite.

Masque pour
le bord gauche.

Masque pour
le bord droit.

Masque pour le coin
en bas à gauche.

Masque pour le bord inférieur

Masque pour le coin
en bas à droite.

La partie centrale est le masque pour l'intérieur de l'élément.

Les masques de bord ne suivent pas les arrondis d'angle.

Voici comment dessiner un petit beurre (petit biscuit originaire de Nantes). On a un peu triché : on a ajouté un ombrage pour faire plus réaliste. C'est une simulation pour que même les possesseurs de Firefox   puissent voir le résultat.

L'élément original.

Le masque (90 pixels de côté).

Le résultat.
(simulation)

Voici les propriétés qui jouent un rôle dans les masques de bordure :

Valeurs pour mask-border.

• mask-border: none;

  Aucun masque de bords n'est appliqué.

• mask-border: <source> <slice> / <width> / <outset> <repeat> <mode>;

  La propriété résumée accepte toutes les valeurs des propriétés détaillées qu'elle regroupe. L'ordre préférentiel est indiqué ci-dessus mais il n'a pas vraiment d'importance. Par contre les caractères / sont obligatoires avant width et outset.
  Les valeurs non citées sont remises à leur valeur initiale.

• mask-border: initial; (none) mask-border: inherit; mask-border: revert; mask-border: revert-layer; mask-border: revert-rule; mask-border: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, revert-rule, unset.

Exemples d'utilisation de la propriété mask-border.

Ces exemples ne fonctionnent pas sur Firefox  .

Créer la denture de découpe d'un timbre français.

Voici comment obtenir un timbre poste français à partir d'une image. Celle-ci a des bords régulier comme le montre le premier example. En appliquant un masque de bords on fait apparaître les dentures de découpe.

L'image originale, aux bords lisses.

L'image avec le masque qui découpe les bords.

Vieillir une photo avec mask-border.

Les vieilles photos ont souvent des bords irréguliers, dus aux outils de découpe chez le photographe et au papier qui se découpe mal. Elles ont de plus des teintes jaunâtres que l'on appelle sépia.

L'image moderne, aux bords lisses, et en couleurs.

L'image avec le masque qui découpe les bords et un effet sepia (pour le téléphone, CSS ne peut rien faire).

Exemple d'animation de mask-border.

La propriété mask-border peut être animée. Reportez-vous aux propriétés individuelles pour des exemples.

Compatibilité des navigateurs avec mask-border.

Pour l'instant, les navigateurs ne traitent pas suffisamment la technique de masquage des bords (2026). Firefox   en particulier est à la traîne. Sur les autres navigateurs, vous pouvez utiliser la propriété -webkit-mask-box-image en remplacement de mask-border.

Remarques :

(1) Utilise la propriété non standard -webkit-mask-box-image.

1

Propriété
mask-border

Estimation de la prise en charge globale.

15%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

1

QQ Browser

Baidu Browser

Samsung Internet

1

Chrome

1

Edge

1

Chrome pour Androïd

1

Androïd Brower

1

Firefox pour Androïd

Safari

Safari sur IOS

Firefox

KaiOS Browser

Opéra

1

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété mask-border.

• Module CSS - Masquage - Niveau 1

  Ce module de spécification décrit deux moyens pour cacher partiellement ou totalement des portions d'éléments visuels : le masquage et le rognage.
  Le masquage consiste à utiliser un autre élément graphique ou une image comme masque.
  Le rognage décrit la région visible des éléments visuels. La région peut être décrite en utilisant certains éléments graphiques SVG ou des formes simples. Tout ce qui se trouve en dehors de cette région n'est pas rendu.

  Concernant mask-border Introduction des techniques de masquage par image. Et première définition des propriétés correspondantes dont la propriété mask-border.
  

  15 Novembre 2012

  Document de travail.

  

  26 Août 2014

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des techniques de masquage.

La spécification qui standardise tout ce qui concerne le masquage s'appelle Module CSS - Masquage (Module CSS - Masquage). Elle décrit la propriété mask-border et les propriétés ci-dessous :

Propriétés :