CSS - Propriété border-image-slice

Description de la propriété border-image-slice.

border-image-slice définit comment l'image de bordure doit être découpée. En effet, la bordure est construite à partir de neuf parties d'image : les quatre coins, les quatre bords et le centre. Ces 9 parties d'image sont extraites d'une image unique définie par border-image-source.

Les neuf parties d'image ne sont pas forcément de tailles identiques.

La partie centrale (5) peut être utilisée pour le fond de l'élément. Le dernier paramètre de border-image-slice indique si ce doit être le cas ou si le fond doit être transparent.

Pour une présentation générale de l'utilisation des bordures-images, reportez-vous à la propriété raccourcie border-image.

Syntaxes pour border-image-slice.

• border-image-slice: 20 15 5 30;

  Quatre valeur positives, sans unité. Elles indiquent comment l'image doit être découpée en neuf parties.
  Les valeurs correspondent successivement à la distance par rapport aux bords haut, droit, bas et gauche, conformément au schéma ci-dessous :

  /

  Il n'y a pas d'unité à préciser : ce sont obligatoirement des pixels si l'image est bitmap, ou des coordonnées si l'image est vectorielle.

  Si les valeurs sont trop grandes, il se peut que la partie centrale soit réduite à zéro. Dans ce cas, la valeur fill sera sans effet (voir plus bas).

• border-image-slice: 25% 10% 10% 30%;

  Les pourcentages sont calculés par rapport aux dimensions de l'image : les décalages horizontaux par rapport à la largeur de l'image, et les décalages verticaux par rapport à sa hauteur.

• border-image-slice: 20 15 5;

  Si trois valeurs seulement sont précisées, la distance par rapport au bord gauche sera identique à celle par rapport au bord droit.

• border-image-slice: 20 15;

  Si deux valeurs seulement sont précisées, la distance par rapport au bord gauche sera identique à celle par rapport au bord droit, et la distance par rapport au bord du bas sera identique à celle par rapport au bord du haut.

• border-image-slice: 20;

  Enfin, si une seule valeur est précisée, elle s'applique à tous les bords.

• border-image-slice: 20 10 15 15 fill;

  La valeur fill indique que la partie centrale de l'image doit être utilisé pour remplir le fond de l'élément. Si fill n'est pas précisé, le fond de l'élément est transparent.

• border-image-slice: inherit | initial | unset;

  Reportez-vous à la description générale de ces valeurs.

Simulateur.

L'image utilisée est celle-ci. Elle mesure 45 pixels de coté.

Prise en charge par les navigateurs.

La propriété border-image-slice ainsi que les autres propriétés relatives aux images de bordure sont correctement prises en charge par les navigateurs.

Afficher le tableau de compatibilité (informations fournies par canIuse.com).

Voir aussi...

Bordures - Propriétés.

• border : Résumé des propriétés des bordures.
• border-collapse : Mode d'encadrement des cellules de tableau.
• border-color : Définit la couleur des bordures.
• border-image : Résumé des propriétés des bordures réalisées avec des images.
• border-image-outset : Débordement de l'image de bordure.
• border-image-repeat : Mode de répétition de l'image de bordure.
• border-image-source : L'image utilisée pour construire la bordure.
• border-image-width : La largeur de la bordure image.
• border-radius : Rayon des angles arrondis.
• border-spacing : Espacement entre les cellules adjacentes dans un tableau.
• border-style : Type de bordure (simple, double, pointillé...).
• border-width : Epaisseur de la bordure.