Propriété CSS border-image-source

La propriété CSS border-image-source définit la source de l'image pour créer l'image de bordure de l'élément.

Si la valeur est "none", ou si l'image ne peut pas être spécifiée, la style de la bordure seront utilisés.

Valeur initiale	none
Appliquée à	Tous les éléments, sauf les éléments de table internes lorsque border-collapse est "collapse". Elle est aussi appliquée à ::first-letter.
Héritée	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.borderImageSource = "url()";

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du 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>Exemple de la propriété border-image-source</h2>
    <p class="border">Bonjour, le Monde!</p>
    <p>Voici l'image originelle:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%">
  </body>
</html>

Essayez-vous-même!

Valeurs

Valeur	Description
none	Aucune image ne sera appliquée.
image	Le chemin à l'image est appliqué en tant qu'une bordure.
initial	Fait utiliser la valeur initiale.
inherit	Hérite la propriété de son élément parent.