CSS - Propriété border-image

Description de la propriété border-image.

border-image est une propriété raccourcie, qui permet de définir en une seule règle, les valeurs de toutes les propriétés relatives aux bordures-image :

• border-image-source : L'image utilisée pour construire la bordure.
• border-image-slice : Définit comment l'image de bordure est découpée.
• border-image-width : La largeur de la bordure image.
• border-image-outset : Débordement de l'image de bordure.
• border-image-repeat : Mode de répétition de l'image de bordure.

Ces propriétés permettent de créer une bordure à partir d'une image. Autrement dit de remplacer le style de trait prédéfini (double, pointillé, etc) par une image. Les possibilités de création sont infinies.

L'image qui servira à construire la bordure sera divisée en 9 parties : une pour chacun des quatre coins, pour chacun des quatre bords et une pour le centre. La propriété Object définit comment l'image doit être découpée. Les neuf parties ne sont pas forcément de dimensions identiques.

Object permet également de décider si la partie numéro 5 sera appliquée au fond de l'élément. Dans le cas contraire, le fond de l'élément reste transparent.

Après ce découpage, les parties d'image sont redimensionnées par Object pour correspondre à l'épaisseur de la bordure. Elles peuvent ensuite être répétées ou étirées jusqu'à couvrir toute la longueur de la bordure : voir Object.

Exemples de syntaxes.

• border-image: source  slice / width / outset  repeat;

  Ceci est la syntaxe générale de border-image :
  Les informations doivent être énumérées dans cet ordre mais les trois premières seulement sont obligatoires.
  On voit que l'épaisseur de la bordure (width) et le décalage vers l'extérieur (outset) sont introduits par un caractère slash ( / ).

• border-image: url('...') 200 / 15px;

  Cette syntaxe définit l'image à utiliser, la valeur à utiliser pour son découpage (200 pixels), et l'épaisseur de la bordure (15px).

• border-image: url('...') 200 / 15px / 10px;

  Cette syntaxe définit l'image à utiliser, la valeur à utiliser pour son découpage, l'épaisseur de la bordure (après le premier / ), et enfin le décalage extérieur (après le deuxième / ).

• border-image: url('...') 20 15 30 12 / 15px 20px;

  Bien entendu toutes ces valeurs peuvent être différentes pour chacun des côtés.
  La syntaxe ci-dessus définit quatre valeurs pour découper l'image, et deux épaisseurs de bordure.

• border-image: inherit | initial | unset;

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

Exemples.

Voici les images utilisées pour les exemples ci-dessous :

border-image-1.png
45 x 45 pixels

border-image-2.png
600 x 600 pixels

border-image-3.png
240 x 240 pixels

Cliquez sur les cadres ci-dessous pour afficher le CSS correspondant.

Prise en charge par les navigateurs.

La propriété border-image est maintenant bien prise 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-outset : Débordement de l'image de bordure.
• border-image-repeat : Mode de répétition de l'image de bordure.
• border-image-slice : Définit comment l'image de bordure est découpée.
• 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.