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 :

border-image-slice - Propriété CSS

border-image-slice

Résumé des caractéristiques de la propriété border-image-slice

Description rapide
Définit comment l'image de bordure est découpée.
Statut
Standard
Type de valeur
Entier+ | Pourcentage+
De une à quatre valeurs peuvent être précisées.
Pourcentages
Calculés d'après les dimensions de la zone d'image.
Valeur initiale
100%
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété border-image-slice passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Arrière-plans et bordures
Références (W3C)
Statut du document:: CRD (document proposé pour la recommandation)

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

La propriété 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 remplir le fond de l'élément. Pour cela il faut ajouter la valeur fill à la propriété border-image-slice. Et dans ce cas, l'image d'arrière-plan éventuellement définie par background-image est masquée.

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

Syntaxes pour border-image-slice.

number est une valeur numérique sans unité, positive ou null.
% est un pourcentage.
Cette syntaxe peut être répétée de une à quatre fois, avec des espaces de séparation.

border-image-slice:
Schéma syntaxique de la propriété CSS border-image-sliceSyntaxe de border-image-slice, définir une bordure-image en CSS. number number % % {1,4} {1,4} fill fill
;
  • 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%; a b c d

    Les pourcentages sont déterminés par rapport aux dimensions de l'image : les pourcentages b et d par rapport à la largeur de l'image, et les pourcentages a et c 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, ou définit par les autres propriétés relatives à l'arrière-plan de l'élément.

  • border-image-slice: initial; border-image-slice: inherit; border-image-slice: revert; border-image-slice: revert-layer; border-image-slice: unset;

    La valeur initiale est : 100%.

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

L'animation de la propriété border-image-slice est possible, mais dans la mesure ou ses valeurs sont fortement liées à l'image, les animations risquent d'être peu pertinentes. A moins d'utiliser une image spécialement conçue dans cet esprit. A vous de lâcher votre créativité.

Exemple interactif.

L'image utilisée pour la bordure de cet exemple 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 depuis 2015 à 2017 suivant les navigateurs.

1
border-image-slice
Estimation de la prise en charge en pourcentage du parc actuel.
96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

Opéra

Opéra Mobile

Safari

Safari sur IOS

Samsung Internet

Voir aussi, dans le même module de standardisation que border-image-slice.

Les spécifications CSS éditées par le W3C sont organisées en modules. border-image-slice fait partie du Module CSS - Arrière-plans et bordures (CSS Backgrounds and Borders Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Résumé des propriétés de l'arrière-plan.
Mode de défilement de l'image d'arrière-plan.
Définit l'étendue de l'arrière-plan, en particulier par rapport à la bordure et aux marges intérieures..
Définit la couleur de l'arrière-plan.
Image d'arrière-plan.
Position de l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan.
Définit comment se positionne l'image d'arrière-plan dans le sens horizontal.
Définit comment se positionne l'image d'arrière-plan dans le sens vertical.
Définit comment est répété l'image d'arrière-plan.
Dimensionnement de l'image d'arrière-plan.
Propriété résumée qui définit l'ensemble des paramètres des bordures.
Définit le rayon de l'angle arrondi en bas à gauche.
Définit le rayon de l'angle arrondi en bas à droite.
Définit la couleur des bordures.
Résumé des propriétés des bordures réalisées avec des images.
Définit le débordement de l'image de bordure.
Définit comment l'image de bordure est répétée ou dilatée pour couvrir la zone voulue..
Définit l'image utilisée pour construire la bordure.
Définit l'épaisseur de la bordure lorsque cette dernière est réalisée avec une image.
Rayon des angles arrondis.
Type de bordure (simple, double, pointillé...).
Définit le rayon de l'angle arrondi en haut à gauche.
Définit le rayon de l'angle arrondi en haut à droite.
Définit l'épaisseur de la bordure de l'élément.
Applique un effet d'ombrage sur les blocs.