Mask-border - Propriété CSS

Description de la propriété mask-border.

⚠

Toutes les propriétés relatives au masquage des bordures sont mal reconnues par les navigateurs actuels (2025). 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 bordures 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. 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, les masques correspondant aux bords pouvant s'agrandir ou se répéter pour couvrir la surface de l'élément masqué.

Toutes ces parties de masque sont regroupée 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.

L'élément original.

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

Le résultat.

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 bordure 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: revertLayer; mask-border: unset;

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

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 par bordure (2025). 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.

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

QQ Browser

Opéra Mobile

1

Firefox

Chrome

1

Safari

Edge

1

Opéra

1

Chrome pour Androïd

1

Safari sur IOS

Samsung Internet

1

UC Browser pour Androïd

Androïd Brower

1

Firefox pour Androïd

KaiOS Browser

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

  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). Il décrit la propriété mask-border et les propriétés ci-dessous :

Propriétés :