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é 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.

Décomposition de l'image en 9 parties

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 :

    Découpage d'une image avec border-image-slice/

    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é.

CSS : border-image-slice

border-image-slice :

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 les versions antérieures   Afficher la version à venir  

Voir aussi...

Bordures - Propriétés.