Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.

La propriété CSS mask-border permet de créer un masque le long de la bordure d'un élément.

Cette propriété est une propriété raccourcie pour les propriétés mask-border-source, mask-border-slice, mask-border-width, mask-border-outset, mask-border-repeat et mask-border-mode. Comme pour l'ensemble des propriétés raccourcies, toutes les propriétés qui ne sont pas explicitement utilisées dans la règle utilisent leur valeur initiale.

Syntaxe

/* source | slice */
mask-border: url('border-mask.png') 25;

/* source | slice | repeat */
mask-border: url('border-mask.png') 25 space;

/* source | slice | width */
mask-border: url('border-mask.png') 25 / 35px;

/* source | slice | width | outset | repeat | mode */
mask-border: url('border-mask.png') 25 / 35px / 12px space alpha;

Valeurs

<'mask-border-source'>
L'image source, pour plus d'informations, voir mask-border-source.
<'mask-border-slice'>
Les dimensions qui permettent de découper l'image source en différentes régions. Il est possible d'utiliser jusqu'à 4 valeurs. Voir mask-border-slice.
<'mask-border-width'>
La largeur du masque pour la bordure. Il est possible d'utiliser jusqu'à 4 valeurs. Voir mask-border-width.
<'mask-border-outset'>
La distance entre le masque de la bordure et le bord extérieur de l'image. Il est possible d'utiliser jusqu'à 4 valeurs. Voir mask-border-outset.
<'mask-border-repeat'>
Cette valeur indiique la façon dont les régions du bord de l'image source sont ajustées afin de correspondre aux dimensions du masque. Il est possible d'utiliser jusqu'à deux valeurs. Voir mask-border-repeat.
<'mask-border-mode'>
Cette valeur définit si l'image source est traitée comme un masque de luminance ou comme un masque alpha. Voir mask-border-mode.

Syntaxe formelle

<'mask-border-source'> || <'mask-border-slice'> [ / <'mask-border-width'>? [ / <'mask-border-outset'> ]? ]? || <'mask-border-repeat'> || <'mask-border-mode'>

Exemples

Image matricielle (bitmap)

Dans cet exemple, on utilise un masque en losange. L'image source utilisée est un fichier PNG de 90 pixels de long et de large :

HTML

<div id="bitmap">
  Cet élément est entouré d'un masque de bordure
  matriciel. C'est pas mal.
</div>

CSS

Pour avoir un seul losange, on divise le carré en 3 (avec la valeur 30). On utilise la valeur round pour que le masque soit réparti également de part et d'autre.

div {
  width: 200px;
  background-color: lavender;
  border: 18px solid salmon;
  padding: 10px;

  mask-border:
    url("https://mdn.mozillademos.org/files/15836/mask-border-diamonds.png")  /* source */
    30 /         /* slice */
    36px 18px    /* width */
    round;       /* repeat */
}

Résultat

Spécifications

Spécification État Commentairezs
CSS Masking Module Level 1
La définition de 'mask-border' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitétous les éléments ; en SVG, cela s'applique aux éléments conteneurs à l'exception des éléments defs et des éléments graphiques
Héritéenon
Pourcentagespour chaque propriété individuelle de la propriété raccourcie :
Médiavisuel
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :
Ordre canoniqueselon la grammaire
Crée un contexte d'empilementoui

Compatibilité des navigateursEdit

TBD

Étiquettes et contributeurs liés au document

Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,