w3docs logo

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>

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.

Support de Navigateurs

chrome edge firefox safari opera
15.0+ 12.0+ 15.0+ 6.0+ 15.0+
❮ Précédent Suivant ❯
Trouvez-vous cela utile?