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 bordures 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 bordures est une opération qui consiste à masquer le pourtour d'un élément à partir d'un masque qui est le plus souvent une image. Celle-ci est divisée en neuf zones: quatre pour les coins, quatre pour les bords et une une pour le centre de l'élément (voir mask-border-slice).

La propriété mask-border-width indique l'épaisseur de la bordure, c'est à dire de la zone sur laquelle va s'appliquer le motif du masque. Ce dernier peut être étrécit ou agrandit en fonction de cette bordure.

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 l'épaisseur de la bordure s'adapte automatiquement à la taille du masque.

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

  La bordure à 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 a et c, et par rapport à la hauteur pour les valeurs b et d.

• mask-border-width: 1 2 2 1;

  Quatre nombres sans unités indiquent le rapport entre l'épaisseur du masque de bordure et la bordure elle-même. 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: revertLayer; mask-border-width: unset;

  Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, 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.

Compatibilité des navigateurs avec mask-border-width.

Pour l'instant, les navigateurs ne traitent pas suffisamment la technique de masquage des bordures (2025). 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.

13%

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

Firefox

Androïd Brower

1

Firefox pour Androïd

Chrome pour Androïd

1

Chrome

1

Edge

1

Safari

Opéra

1

Safari sur IOS

KaiOS Browser

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

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

Propriétés :