Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

CSS - Propriété mask-border

Description de la propriété mask-border.

La propriété mask-border est expérimentale. Avant de l'utiliser, vérifier sa compatibilité avec les navigateurs actuels, et si nécessaire, n'hésitez pas à utiliser les préfixes spécifiques à chaque navigateur (-moz-, -webkit-, etc.).

La propriété mask-border est une propriété raccourcie qui définit tous les paramètres de masquage par bordure.

La différence avec 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. Toutes ces parties de masque sont regroupée en une seule image, divisée en 9 parties, pas nécessairement de mêmes dimensions.

Exemple d'un masque pour la propriété mask-border

L'élément original - Exemple pour mask-border
L'élément original
Le masque - Exemple pour mask-border


Le masque
L'élément original - Exemple pour mask-border
Le résultat

Reportez-vous aux propriétés individuelles pour une explication plus détaillée de chacun des paramètres :

  • mask-border-mode :
  • mask-border-outset :
  • mask-border-repeat :
  • mask-border-slice :
  • mask-border-source :
  • mask-border-width :

Prise en charge par les navigateurs (compatibilité).

Afficher les versions antérieures   Afficher la version à venir