Propriété CSS border-image-slice

La propriété CSS border-image-slice définit comment découper l'image définie par border-image-source afin que le navigateur puisse en utiliser les morceaux comme bordure. L'image est découpée en neuf régions : quatre coins, quatre bords et une partie centrale. C'est l'une des propriétés CSS3.

Imaginez deux lignes horizontales et deux lignes verticales tracées à travers l'image source. Là où elles se croisent, elles divisent l'image en une grille 3×3. Les quatre tuiles des coins sont placées aux coins de la bordure de l'élément, les quatre tuiles des bords sont étirées ou répétées le long de chaque côté (contrôlé par border-image-repeat), et la tuile centrale est ignorée par défaut — elle reste entièrement transparente, sauf si vous ajoutez le mot-clé fill, auquel cas elle est dessinée derrière le contenu comme une image d'arrière-plan.

border-image-slice est la propriété qui détermine où ces quatre lignes se situent. Seule, elle ne produit rien de visible ; elle fonctionne toujours conjointement avec border-image-source et une border-width non nulle (ou la valeur border-image-width de la propriété raccourcie). C'est pourquoi chaque exemple ci-dessous définit également une border transparente et utilise le raccourci border-image pour fournir la source.

Fonctionnement des valeurs

La propriété accepte un number, un percentage et un mot-clé facultatif fill :

number — un décalage de bord mesuré en pixels pour les images matricielles (PNG, JPEG) et en coordonnées pour les images vectorielles (SVG). Remarque : le nombre est sans unité ici — écrivez 30, pas 30px.
percentage — un décalage de bord exprimé en pourcentage de la taille de l'image source (sa largeur pour les découpes gauche/droite, sa hauteur pour les découpes haut/bas).
fill — conserve et affiche la région centrale au lieu de la supprimer.

Vous pouvez donner une à quatre valeurs de décalage. Les valeurs négatives ne sont pas autorisées, et les décalages supérieurs à la taille de l'image sont limités. Les valeurs suivent l'ordre standard des bords en CSS :

Valeurs données	Signification
`20%`	Les quatre côtés sont découpés à la même distance.
`30 50`	Haut et bas = `30` ; gauche et droite = `50`.
`30 50 10`	Haut = `30` ; gauche et droite = `50` ; bas = `10`.
`30 50 10 5`	Haut = `30` ; droite = `50` ; bas = `10` ; gauche = `5` (dans le sens des aiguilles d'une montre depuis le haut).

Quand l'utiliser ?

Utilisez border-image-slice lorsque vous créez un cadre décoratif à partir d'une seule image — bordures ornementales, bords en ruban, panneaux de style bande dessinée, ou graphiques en « bulle » arrondis qui doivent s'adapter à n'importe quelle taille d'élément sans déformer les coins. En découpant les coins séparément de la partie étirable du milieu des bords, les coins restent nets quelle que soit la largeur de l'élément, tandis que les côtés se répètent ou s'étirent pour s'ajuster.

Valeur initiale	100%.
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Hérité	Non.
Animatable	Non.
Version	CSS3
Syntaxe DOM	object.style.borderImageSlice = "10%";

Syntaxe

Syntaxe de la propriété CSS border-image-slice

border-image-slice: number | % | fill | initial | inherit;

Exemple de la propriété border-image-slice :

Exemple de la propriété CSS border-image-slice avec une valeur en % (pourcentage)

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 20%;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">Here the border-image-slice is set to 20%.</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Essayez vous-même »

Résultat

Dans l'exemple suivant, deux valeurs sont utilisées. La première valeur (30) crée des découpes mesurées depuis le haut et le bas, et la seconde valeur (50) crée des découpes mesurées depuis la gauche et la droite.

Exemple de la propriété border-image-slice avec deux valeurs :

Exemple de la propriété CSS border-image-slice avec deux valeurs

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 30 50;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">Here the border-image-slice is set to 30 and 50.</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Essayez vous-même »

Dans l'exemple suivant, la valeur % est combinée avec le mot-clé fill, de sorte que la région centrale ignorée de l'image est également dessinée derrière le contenu du paragraphe.

Exemple de la propriété border-image-slice avec les valeurs "%" et "fill" :

Exemple de la propriété CSS border-image-slice avec les valeurs pourcentage et fill

<!DOCTYPE html>
<html>
  <head>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url("/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg") round;
        border-image-slice: 15% fill;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border"><strong>Here the border-image-slice is set to 15 fill.</strong></p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Essayez vous-même »

Valeurs

Valeur	Description	Essayer
number	Représente un décalage de bord en pixels pour les images matricielles et en coordonnées pour les images vectorielles.	Essayer »
%	Représente un décalage de bord en pourcentage de la taille de l'image source.	Essayer »
fill	Affiche la partie centrale de l'image comme image d'arrière-plan.	Essayer »
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Propriétés associées

border-image-slice est l'une des plusieurs propriétés détaillées qui composent le raccourci border-image. Pour avoir une vue d'ensemble complète de la façon dont les images de bordure sont construites, voir également :

border-image-source — définit l'image à découper.
border-image-width — définit la largeur de la zone border-image.
border-image-repeat — contrôle la façon dont les découpes de bord s'étirent, se répètent ou s'arrondissent.
border-image-outset — pousse l'image de bordure au-delà de la boîte de bordure.

Pratique

Que fait la propriété border-image-slice en CSS ?

Elle contrôle la quantité de champ de saisie qui doit être à l'intérieur du textarea.Elle divise l'image utilisée pour créer une bordure en 9 régions : 4 coins, 4 bords et un centre.Elle est utilisée pour créer des transformations 3D, des transitions et des animations en HTML et CSS.Elle définit comment l'image de bordure est remplie et mise à l'échelle par rapport à la boîte de bordure.