Propriété CSS border-image

La propriété raccourcie border-image vous permet d'utiliser une image — ou un dégradé CSS — comme bordure d'un élément, au lieu d'un simple trait plein. Elle fait partie des propriétés CSS3.

Cette page explique le fonctionnement de la propriété (le modèle en neuf zones qui la sous-tend), la syntaxe du raccourci, plusieurs exemples exécutables, et dans quels cas border-image est pertinent.

Fonctionnement de border-image : le modèle en neuf zones

Le mécanisme qui rend border-image possible est le découpage en neuf zones. Le navigateur prend votre image source et la découpe avec quatre lignes — deux horizontales, deux verticales — en neuf régions :

4 coins sont placés dans les quatre coins de l'élément et ne sont jamais étirés ni répétés.
4 bords (haut, droite, bas, gauche) remplissent l'espace entre les coins. Ils sont étirés, répétés, arrondis ou espacés selon border-image-repeat.
1 centre est ignoré par défaut, ce qui laisse apparaître l'arrière-plan de l'élément. Ajoutez le mot-clé fill à border-image-slice pour le conserver.

L'emplacement des lignes de découpe est contrôlé par border-image-slice. Ce modèle explique pourquoi une petite image de cadre décoratif peut entourer une boîte de n'importe quelle taille sans que les coins ne se déforment.

Important : border-image ne s'affiche que si l'élément possède une bordure. Vous devez définir un border-style (ou le raccourci border) différent de none — par exemple border: 10px solid transparent; — sinon rien n'apparaît.

Le raccourci et ses sous-propriétés

Ce raccourci combine plusieurs propriétés border-image individuelles. Les valeurs omises prennent leur valeur initiale. Voir les notes pour chaque sous-propriété ci-dessous :

border-image-source - Si la valeur est « none » ou si l'image ne peut pas être affichée, les styles de bordure seront utilisés.
border-image-slice - La partie centrale de l'image est traitée comme entièrement transparente, sauf si la valeur « fill » est définie.
border-image-width - Si la valeur de cette propriété est supérieure à la border-width de l'élément, l'image de bordure s'étendra au-delà du bord de padding (et/ou de content). Notez également que cette propriété peut être spécifiée avec une, deux, trois ou quatre valeurs.
border-image-outset - Elle peut également être spécifiée avec une, deux, trois ou quatre valeurs.
border-image-repeat - Elle peut être spécifiée avec deux valeurs. Si la deuxième valeur est omise, elle est supposée être identique à la première. Lorsqu'une seule valeur est définie, elle s'applique à tous les quatre côtés ; avec deux valeurs, la première s'applique au haut et au bas, la seconde à la gauche et à la droite.

Propriété	Valeur
Valeur initiale	none 100% 1 0 stretch
S'applique à	Tous les éléments, sauf les éléments internes d'un tableau lorsque border-collapse est « collapse ». S'applique également à ::first-letter.
Héritage	Non
Animable	Non
Version	CSS3
Syntaxe DOM	object.style.borderImage = "url(border.png) 30 round"

Syntaxe

Syntaxe de la propriété CSS border-image

border-image: source slice width outset repeat | initial | inherit;

Exemple de la propriété border-image :

Exemple de la propriété CSS border-image

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-slice example</h2>
    <p class="border">border-image: 10% round;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Essayez vous-même »

Résultat

Exemple de la propriété border-image avec plusieurs valeurs :

Exemple de la propriété CSS border-image avec différentes valeurs

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 30%;
        border-image-repeat: repeat;
        border-image-width: 15px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 20%;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 15%;
        border-image-repeat: space;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image example with all values.</h2>
    <p class="border">border-image: 30% 15px repeat</p>
    <p class="border2">border-image: 20% 10px round;</p>
    <p class="border3">border-image: 15% 20px space;</p>
    <p>Here is the original image used:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Essayez vous-même »

Utiliser un dégradé CSS comme bordure

border-image-source accepte un dégradé en plus d'une URL, ce qui permet de créer une bordure colorée sans aucun fichier image. Le dégradé est traité exactement comme une image et découpé de la même manière.

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .gradient-border {
        border: 12px solid transparent;
        padding: 15px;
        border-image: linear-gradient(45deg, #1095c1, #f7df1e) 1;
      }
    </style>
  </head>
  <body>
    <p class="gradient-border">A border drawn from a CSS gradient.</p>
  </body>
</html>

Le 1 après le dégradé est la valeur de border-image-slice. Comme un dégradé n'a pas de bords réels à protéger, le découper à 1 mappe simplement les quatre bords et les coins sur la bordure sans distorsion.

Quand utiliser border-image

Utilisez border-image lorsqu'une couleur unie n'est pas suffisante :

Cadres décoratifs ou thématiques — bordures ornées, dessinées à la main ou à effet papier déchiré, impossibles à réaliser avec border-style.
Bordures dégradées — voir l'exemple ci-dessus ; bien plus simple que de simuler l'effet avec un élément enveloppant et background-clip.
Motifs répétitifs — une petite tuile qui entoure des boîtes de n'importe quelle taille grâce au modèle en neuf zones.

Pour de simples coins arrondis, utilisez border-radius ; pour un simple trait coloré, utilisez le raccourci standard border — ils sont plus légers et animables, contrairement à border-image.

Valeurs

Valeur	Description	Essayer
border-image-source	Spécifie l'image source utilisée pour créer l'image de bordure. Il peut s'agir d'une URL, d'un URI de données, d'un dégradé CSS ou d'un SVG inline.
border-image-slice	Spécifie comment découper l'image définie par border-image-source. L'image est toujours découpée en neuf sections : quatre coins, quatre bords et le centre.	Essayer »
border-image-width	Spécifie la largeur de l'image de bordure.
border-image-repeat	Spécifie si l'image de bordure est répétée, arrondie ou étirée.	Essayer »
initial	Définit la propriété à sa valeur par défaut.
inherit	Hérite de la propriété depuis son élément parent.

Compatibilité des navigateurs

border-image est pris en charge par tous les navigateurs modernes (Chrome, Edge, Firefox, Safari et Opera). Comme elle se replie gracieusement sur le border-style/border-color que vous avez défini, vous pouvez la superposer à une bordure normale en tant qu'amélioration progressive : les navigateurs plus anciens ou non compatibles affichent la bordure simple, les plus récents affichent l'image.

Exercice

Pratique

Qu'est-ce qui est vrai à propos de la propriété CSS border-image selon le contenu de l'URL spécifiée ?

La propriété CSS border-image est une propriété raccourcie permettant de définir les propriétés individuelles d'image de bordure, c'est-à-dire border-image-source, border-image-slice, border-image-width, border-image-outset et border-image-repeat, en une seule déclaration.La propriété border-image ne permet pas aux développeurs de spécifier une image à utiliser comme bordure autour d'un élément.La propriété border-image peut être utilisée avec tous les éléments HTML.La propriété CSS border-image ne peut pas être animée et ne s'applique pas aux éléments de tableau lorsque border-collapse est défini sur collapse.La propriété CSS border-image nécessite une seule valeur pour fonctionner.