Border-image - Propriété CSS

Description de la propriété border-image.

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

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é border-image-slice définit comment l'image doit être découpée. Les neuf parties ne sont pas forcément de dimensions identiques.

border-image-slice 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 border-image 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 border-image-repeat.

Chacune des valeurs attribuées à border-image peut être différenciée pour les quatre côtés, sauf en ce qui concerne la source. Dans ce cas les règles habituelles du CSS s'appliquent :

Une seule valeur indiquée : elle s'applique aux quatre côtés de l'élément.

Deux valeurs indiquées : la première s'applique aux côtés haut et bas, la deuxième aux côtés gauche et droit.

Trois valeurs indiquées : elles s'appliquent conformément au schéma ci-dessus : la deuxième valeur s'applique aux côtés gauche et droit.

Quatre valeurs indiquées : elles s'appliquent chacune à un des côtés de l'élément, en commençant par le bord du haut et en tournant dans le sens des aiguilles d'une montre.

Les bordures-images ne suivent pas les arrondis d'angle. La propriété border-radius est donc inopérante avec une bordure-image.

Si, sur un même élément, une bordure image ET une bordure classique sont définies, les règles de priorité du CSS définissent laquelle de ces deux bordures sera affichée. Les navigateurs ne sont pas censé superposer les deux bordures. Voir le tutoriel sur Les priorités.

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: initial; border-image: inherit; border-image: revert; border-image: revertLayer; border-image: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

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
172 x 164 pixels

Prise en charge par les navigateurs.

La possibilité d'utiliser une image pour construire une bordure est maintenant bien prise en charge par les navigateurs. Les propriétés qui définissent cette bordure sont également bien reconnues.

Remarques :

(1) Supporte la propriété résumé mais pas les propriétés détaillées.

1

Utilisation d'images
pour des bordures

Estimation de la prise en charge globale.

97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

1

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété border-image.

• Module CSS - Arrière-plans et bordures - Niveau 3

  Concernant border-image. Introduction de la propriété résumé border-image pour définir les caractéristiques des nouvelles bordures réalisées avec des images.
  

  02 Août 2002

  Document de travail.

  

  17 Décembre 2009

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des bordures.

La spécification du W3C "module CSS - Arrière-plans et bordures" regroupe tout ce qui concerne les bordures et les arrière-plans. La propriété border-image est décrite dans cette norme, avec les suivantes :

Propriétés :