Propriété CSS border-image-source
The border-image-source CSS property allows to specify an image as the border around an element. See examples and try them yourself.
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
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>Résultat
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
Pratique
Quelle est la bonne utilisation de la propriété border-image-source en CSS ?