Mask-border-outset - Propriété CSS

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

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

• length est une valeur numérique suivie d'une des unités de dimension.
• number est un nombre sans unité.

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

⚠

Le masquage des bords n'est pas encore correctement pris en charge par les navigateurs. Il y a cependant une propriété non standard équivalente à mask-border-outset sur presque tous les navigateurs : -webkit-mask-box-image-outset. Sur Firefox   il n'y a pas d'équivalence.

Le masquage des bords consiste à masquer le pourtour d'un élément à partir d'un masque, qui est une une image 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. Cette division est effectuée par mask-border-slice.

La propriété mask-border-outset indique de combien le masque doit être décalé à l'extérieur du bord de l'élément. La partie du masque qui, à cause de ce décalage, déborde de l'élément est tronquée.

mask-border-outset:0
(simulation)

mask-border-outset:10px
(simulation)

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

Valeurs pour mask-border-outset.

⚠ Les exemples en fonctionnent pas sur Firefox  .

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

  De une à quatre valeurs positives ou nulles, suivies d'une unité de dimensions. Le masque est décalé suivant les valeurs indiquées. En fonction du nombre de valeurs, on a la correspondance suivante :

  • Une seule valeur : elle indique le décalage par rapport chacun des côtés.
  • Deux valeurs : la première désigne le décalage par rapport aux bords horizontaux, la deuxième le décalage par rapport aux bords verticaux.
  • Trois valeurs : la première valeur est le décalage par rapport au bord haut, la deuxième par rapport bords droits et gauche et la dernière par rapport au bas.
  • Quatre valeurs : elles s'appliquent successivement aux décalages suivant les 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.

  
  Voici ce que cela donne sur un exemple. Le motif de masquage est celui-ci, il mesure 60 pixels de coté et est divisé par mask-border-slice en neuf carrés de 20 pixels chacun. En haut et en bas, le motif est vu entièrement (outset = 0). Sur la gauche et sur la droite on en voit que la moitié (outset = 10 pixels).

  ─ 60px ─

  │
  60px
  │

  
  Exemple
  border:20px solid gray;
mask-box-outset:0px 10px;
-webkit-mask-box-image-outset:0px 10px;
• mask-border-outset: 1 2 2 1;

  Quatre nombres sans unités indiquent le rapport entre le décalage et l'épaisseur de la bordure. Les correspondances en fonction du nombre de valeurs sont les mêmes que précédemment.

  
  Sur l'exemple, la bordure a une épaisseur de 20 pixels. En appliquant la valeur 0.5 à mask-border-outset le motif est décalé de 10 pixels vers l'extérieur, il est donc vu à moitié. Le motif est le même que dans l'exemple précédent.

  Exemple
  border:20px solid gray;
mask-box-outset:0 0.5;
-webkit-mask-box-image-outset:0 0.5;
• mask-border-outset: initial; (0) mask-border-outset: inherit; mask-border-outset: revert; mask-border-outset: revert-layer; mask-border-outset: revert-rule; mask-border-outset: unset;

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

Exemple d'animation de mask-border-outset.

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

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

L'image utilisée pour masquer les bords de l'élément est la suivante, divisée par mask-border-slice en neuf carrées de 20 pixels de côté.

60px

60px

Compatibilité des navigateurs avec mask-border-outset.

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

Remarques :

(1) Ces navigateurs ne supportent pas la propriété mask-border-outset. Utilisez la propriété non standard -webkit-mask-box-image-outset à la place.

1

Propriété
mask-border-outset

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

• 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-outset Présentation des techniques de masquage des éléments et première introduction de la propriété mask-border-outset.
  

  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 ou le masquage des bordures s'appelle Module CSS - Masquage. La propriété mask-border-outset y est décrite, ainsi que celles ci-dessous :

Propriétés :