Mask-border-width - Propriété CSS

Schéma de la syntaxe de mask-border-width.

Description des termes utilisés sur le schéma :

• length est une valeur numérique suivie d'une des unités de dimension.
• % est un pourcentage calculé par rapport à la largeur ou la hauteur de l'élément.
• number est un nombre sans unité.

Description de la propriété mask-border-width.

⚠

Le masquage des bords est mal pris en charge par les navigateurs. Il y a parfois une propriété équivalente à mask-border-width : -webkit-mask-box-image-width, mais sur Firefox   il n'y a pas d'équivalence.

Le masquage des bords est une opération qui consiste à masquer le contour d'un élément à partir d'un masque qui est le plus souvent une image png. Celle-ci est divisée en neuf zones: quatre pour les coins, quatre pour les côtés et une une pour le centre de l'élément (voir mask-border-slice).
Là ou le masque est transparent, l'élément est caché, là où il est opaque l'élément est visible. Bien entendu une opacité moyenne du masque donne une visibilité moyenne. Il est possible aussi de traiter les masques d'après leur luminance.

La propriété mask-border-width indique l'épaisseur de la zone sur laquelle va s'appliquer le motif du masque. Si mask-border-slice donne une dimension inférieure à mask-border-width, la zone du masque concernée est dilatée. Elle est réduite dans le cas contraire.

La valeur de mask-border-width peut éventuellement être calculée par rapport à l'épaisseur de la bordure de l'élément.

mask-border-width:20px;
(simulation)

mask-border-width:30px;
(simulation)

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

Valeurs pour mask-border-width.

• mask-border-width: auto;

  Avec auto la zone d'application du masque s'adapte automatiquement à la taille du masque définie par mask-border-slice.

• mask-border-width: 8px 5px 8px 20px; a b c d

  La zone d'application du masque à l'épaisseur exacte indiquée. Le masque s'agrandit ou se rétrécit pour correspondre.

  De une à quatre valeurs peuvent être indiquées avec la correspondance suivante :

  • Une seule valeur, elle s'applique à tous les côtés.
  • Deux valeurs, la première s'applique aux bords horizontaux, la deuxième aux bords verticaux.
  • Trois valeurs, la première valeur s'applique au bord haut, la deuxième aux bords droits et gauche et la dernière au bas.
  • Quatre valeurs : elles s'appliquent successivement aux quatre côtés en commençant par le haut, et en tournant dans le sens des aiguilles d'une montre.
  
  Une seule valeur.

  
  Deux valeurs.

  
  Trois valeurs.

  
  Quatre valeurs.

  S'ils s'agit de pourcentages, ceux-ci sont calculés par rapport à la largeur de l'élément pour les valeurs b et d, et par rapport à la hauteur pour les valeurs a et c. Ce qui est logique, mais provoque un effet curieux : la largeur de l'élément influe sur les bords verticaux, tandis que la hauteur influence les bords horizontaux.

  Sur cet élément mask-border-width vaut 10%. Le calcul par rapport à la largeur est visible curieusement sur les bords verticaux de l'élément.
• mask-border-width: 1 2 2 1;

  De une à quatre nombres sans unités indiquent le rapport entre l'épaisseur de la zone d'action du masque de bords, et la bordure. Les correspondances en fonction du nombre de valeurs sont les mêmes que précédemment.

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

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, revert-rule, unset.

Exemple d'animation de mask-border-width.

Les animations ne fonctionnent pas sous Firefox  , et pour les autres navigateurs, nous avons utilisé la propriété non standard -webkit-mask-box-image-width. Mais moyennant ces précautions, il est possible d'animer la propriété mask-border-width. L'animation se fait de façon continue.

Exemple interactif avec la propriété mask-border-width.

Le masque utilisé est celui-ci. Il est découpé par mask-border-slice en neuf parties de 20 pixels de côté. La bordure de l'élément fait 1 pixel d'épaisseur, pour le cas ou vous souhaiteriez tester la syntaxe avec des nombres sans unité.

─ 60px ─

│
60px
│

Compatibilité des navigateurs avec mask-border-width.

Pour l'instant, les navigateurs ne traitent pas suffisamment la technique de masquage des bords (2026). Sur certains navigateurs, vous pouvez utiliser la propriété non standard -webkit-mask-box-image-width en remplacement de mask-border-width. Sur Firefox   il n'y a pas d'équivalence.

Remarques :

(1) Propriété non reconnue. Utilisez à la place la propriété non standard -webkit-mask-box-image-width.

1

Propriété
mask-border-width

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-width.

• 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-width Introduction de la propriété mask-border-width et de toutes les propriétés relatives au masquage d'éléments.
  

  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. La propriété mask-border-width y est décrite, ainsi que celles ci-dessous :

Propriétés :