Propriété CSS border-image-source

La propriété CSS border-image-source définit l'image utilisée pour dessiner la bordure d'un élément à la place du border-style classique. Elle répond à la question « quelle image doit être découpée et placée autour de la boîte ? », tandis que les propriétés associées déterminent comment cette image est découpée et mise en page.

Cette page couvre les valeurs acceptées par border-image-source, son interaction avec les autres propriétés border-image-*, les pièges qui font silencieusement disparaître une bordure-image, ainsi que des exemples modifiables.

border-image-source fait partie des propriétés CSS3 et est presque toujours définie conjointement avec border-image-slice via le raccourci border-image.

Quand l'utiliser

Optez pour une bordure-image lorsqu'une border ordinaire ne peut pas exprimer l'apparence souhaitée — un cadre décoratif, un ruban, un bord dessiné à la main ou un contour dégradé. Puisque la source peut être n'importe quelle image, y compris un dégradé CSS, vous obtenez des effets impossibles à produire avec border-color seul.

Comment border-image-source s'articule avec les autres propriétés

border-image-source ne fait que nommer l'image. Quatre propriétés sœurs contrôlent le reste, et une bordure-image n'est pas rendue tant que border-image-slice n'est pas également défini :

border-image-slice — découpe la source en 9 zones (4 coins, 4 bords, 1 centre).
border-image-width — épaisseur de la bordure-image dessinée.
border-image-outset — distance à laquelle l'image s'étend au-delà de la boîte de bordure.
css-border-image-repeat-property — indique si les tranches de bord sont stretch (étirées), repeat (répétées) ou round (arrondies).

Points importants à retenir

Définissez d'abord une border. Une bordure-image remplit la zone définie par la bordure de l'élément ; il faut donc toujours un border-width (couramment border: 10px solid transparent;). Sans largeur de bordure, il n'y a rien à peindre.
border-image-slice est obligatoire. Définir uniquement la source n'affiche rien ; le navigateur a besoin des valeurs de découpe pour connaître l'emplacement des coins.
none ou un chargement échoué revient à border-style. Si l'image ne peut pas être affichée, les styles de bordure classiques sont utilisés — donnez à l'élément un border-style visible comme filet de sécurité.

Valeur initiale	none
S'applique à	Tous les éléments, sauf les éléments de tableau internes lorsque border-collapse est « collapse ». S'applique également à ::first-letter.
Hérité	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.borderImageSource = "url()";

Syntaxe

Valeurs de CSS border-image-source

border-image-source: none | image | initial | inherit;

Exemple de la propriété border-image-source :

Exemple de code CSS border-image-source

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

Essayez vous-même »

Résultat

![Description CSS border-image-source](/uploads/media/default/0001/04/aad8e5faee47f41e2ac519e2aa0214b5c1c9cb8f.png "CSS border-image-source example result" =420x)

Exemple avec un dégradé CSS comme source

La source ne doit pas nécessairement être un fichier — toute image CSS fonctionne, y compris les dégradés. Voici comment dessiner un cadre coloré sans aucun fichier image :

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

Ici, border-image-slice: 1 découpe un seul pixel, ce qui suffit pour un dégradé fluide car le dégradé se poursuit sur chaque bord.

Valeurs

Valeur	Description
none	Aucune image n'est utilisée ; l'élément revient à son `border-style`. Il s'agit de la valeur par défaut.
image	Toute `<image>` CSS : un `url()` vers un fichier, ou un dégradé tel que `linear-gradient(...)` / `radial-gradient(...)`.
initial	Réinitialise la propriété à sa valeur par défaut (`none`).
inherit	Hérite la valeur de l'élément parent.

Propriétés associées

border-image — le raccourci pour les cinq propriétés border-image-*.
border-image-slice — requis pour afficher effectivement l'image.
border-image-width et border-image-outset — taille et débordement.
border-image-repeat — comment les bords se répètent en mosaïque.

Pratique

Quelle est l'utilisation correcte de la propriété border-image-source en CSS ?

La propriété border-image-source peut être utilisée avec une URL pour spécifier le chemin vers l'image.La propriété border-image-source peut inclure un code couleur comme valeur.La propriété border-image-source est spécifiée avec le mot-clé 'none' lorsqu'aucune image n'est utilisée.La propriété border-image-source peut accepter une série de nombres comme valeur pour personnaliser la largeur de la bordure.