Propriété CSS border-image-source

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

La propriété border-image-source fait partie des propriétés CSS3.

Si la valeur est définie sur "none", ou si l'image ne peut pas être affichée, les styles de bordure seront utilisés.

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

Syntaxe

Valeurs de la propriété CSS border-image-source

css

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

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

Exemple de code CSS border-image-source

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image-source: url("https://fr.w3docs.com/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="https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border image" style="width:50%" />
  </body>
</html>

Try it Yourself »

Résultat

CSS border-image-source description

Valeurs

Valeur	Description
none	Aucune image ne sera appliquée.
image	Le chemin vers l'image est appliqué comme bordure.
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Pratique

Quelle est la bonne utilisation 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.

Propriété CSS border-image-source ​

Syntaxe ​

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

Résultat ​