La propriété border-image-slice permet de découper l'image fournie via la propriété border-image-source en 9 régions : quatre pour les coins, quatre pour les côtés et une pour le milieu. Ces régions sont définies à l'aide de quatre valeurs mesurées depuis les bords vers l'intérieur de l'image.

Les 9 zones définies par border-image-slice

Les quatre valeurs contrôlent les positions des lignes de découpe. Si certaines ne sont pas définies, leurs valeurs sont déduites des valeurs fournies (se référer à la section sur la syntaxe).

La zone du milieu ne sera pas utilisée par la bordure même mais pourra être utilisée comme image d'arrière-plan si on utilise le mot-clé fill. Ce mot-clé peut être utilisé à n'importe quelle position dans la déclaration (avant, après ou entre les autres valeurs).

Les propriétés border-image-repeat, border-image-width, border-image-outset définissent la façon dont ces images seront utilisées.

La propriété raccourcie border-image peut éventuellement réinitialiser cette propriété avec sa valeur par défaut.

Syntaxe

/* border-image-slice :                       */
/* Une valeur qui s'applique aux quatre côtés */
border-image-slice: 30%; 

/* border-image-slice :                */
/* Première valeur : côtés verticaux   */
/* Deuxième valeur : côtés horizontaux */
border-image-slice: 10% 30%;

/* border-image-slice :                */
/* Première valeur : côté haut         */
/* Deuxième valeur : côtés horizontaux */
/* Troisième valeur : côté bas         */
border-image-slice: 30 30% 45;

/* border-image-slice :           */
/* Première valeur : côté haut    */
/* Deuxième valeur : côté droit   */
/* Troisième valeur : côté bas    */
/* Quatrième valeur : côté gauche */
border-image-slice: 7 12 14 5; 

/* border-image-slice: … fill          */
/* Le mot-clé fill peut être intercalé */
/* à n'importe quel endroit            */
border-image-slice: 10% fill 7 12;

/* Valeurs globales */
border-image-slice: inherit;
border-image-slice: initial;
border-image-slice: unset;

Valeurs

slice
Une valeur de type <number> ou <percentage> qui indique le décalage entre le bord de l'image et la droite utilisée pour « découper » l'image. On notera qu'une valeur de type <length> n'est pas autorisée et est donc invalide. Une valeur de type <number> correspondra à des pixels pour les images matricielles et à des coordonnées pour les images vectorielles. Les valeurs de type <percentage> sont relatives à la hauteur de l'image pour les axes verticaux et à la largeur de l'image pour les axes horizontaux. Les valeurs négatives sont invalides et les valeurs dépassant les bornes sont ramenées à 100%. Il est préférable d'utiliser des pourcentages pour les images vectorielles.
fill
Un mot-clé qui, s'il est présent, force la zone centrale de l'image à être affichée par dessus l'image d'arrière plan de l'élément. La hauteur et la largeur de l'image sont redimensionnées comme les tranches haute et gauche.

Syntaxe formelle

<number-percentage>{1,4} && fill?


<number-percentage> = <number> | <percentage>

Exemples

CSS

p {
 border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
 border-image-slice: 30;
 border-image-width: 20px;
 border-image-repeat: round;
 padding: 40px;
}

HTML

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
  no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-image-slice' dans cette spécification.
Candidat au statut de recommandation Définition initiale.

Valeur initiale100%
Applicabilitétous les éléments sauf les éléments de table internes lorsque border-collapse vaut collapse. S'applique aussi à ::first-letter.
Héritéenon
Pourcentagesse rapporte à la taille de l'image de bordure
Médiavisuel
Valeur calculéeun à quatre pourcentages, comme spécifiés, ou des longueurs absolues, suivis par le mot-clé fill si spécifié
Type d'animationdiscrète
Ordre canoniqueles pourcentages ou les longueurs, éventuellement suivis par le mot-clé fill

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 15Edge Support complet 12Firefox Support complet 15
Notes
Support complet 15
Notes
Notes Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
Notes Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
Notes From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).
Notes Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
IE Support complet 11Opera Support complet 15Safari Support complet 6WebView Android Support complet 4.1
Préfixée
Support complet 4.1
Préfixée
Préfixée Nécessite l'utilisation d'un préfixe : -webkit-
Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 15
Notes
Support complet 15
Notes
Notes Small SVGs are incorrectly stretched, because percentages in border-image-slice are computed to integers instead of floats (bug 1284797).
Notes Until Firefox 47, SVGs without viewport were not sliced correctly (bug 619500).
Notes From Firefox 48 until Firefox 49, SVGs without viewport are displayed the same as SVGs with viewport, but if the slices are not exactly 50%, they are incorrectly stretched (bug 1264809).
Notes Until Firefox 57, an issue persisted for SVGs without viewport when e10s was disabled (bug 1290782).
Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.
Cette fonctionnalité nécessite un préfixe particulier ou utilise un autre nom.

Voir aussi

Étiquettes et contributeurs liés au document

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