Propriété border-image CSS

La propriété raccourcie border-image permet de spécifier une image comme bordure autour d'un élément.

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

Cette propriété raccourcie combine plusieurs propriétés individuelles de border-image. Les valeurs omises utilisent leurs valeurs initiales par défaut. Consultez les notes pour chaque sous-propriété ci-dessous :

border-image-source - Si la valeur est "none" ou si l'image ne peut pas être affichée, les styles de bordure seront utilisés.
border-image-slice - La partie centrale de l'image est traitée comme entièrement transparente, sauf si la valeur "fill" est définie.
border-image-width - Si la valeur de cette propriété est supérieure à la largeur de bordure de l'élément, l'image de bordure s'étendra au-delà du bord de la marge intérieure (et/ou du contenu). Sachez également que cette propriété peut être spécifiée avec une, deux, trois ou quatre valeurs.
border-image-outset - Elle peut également être spécifiée avec une, deux, trois ou quatre valeurs.
border-image-repeat - Elle peut être spécifiée par deux valeurs. Si la deuxième valeur est omise, elle est supposée identique à la première. Lorsque nous définissons une seule valeur, elle s'applique aux quatre côtés ; si nous en définissons deux, la première s'applique au haut et au bas, la seconde à la gauche et à la droite.

Propriété	Valeur
Valeur initiale	none 100% 1 0 stretch
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.borderImage = "url(border.png) 30 round"

Syntaxe

Syntaxe de la propriété CSS border-image

css

border-image: source slice width outset repeat | initial | inherit;

Exemple de la propriété border-image :

Exemple de la propriété CSS border-image

html

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

Try it Yourself »

Résultat

SS border-image Property

Exemple de la propriété border-image avec plusieurs valeurs :

Exemple de la propriété CSS border-image avec différentes valeurs

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .border {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 30%;
        border-image-repeat: repeat;
        border-image-width: 15px;
      }
      .border2 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 20%;
        border-image-repeat: round;
        border-image-width: 10px;
      }
      .border3 {
        border: 10px solid transparent;
        padding: 15px;
        border-image: url(https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
        border-image-slice: 15%;
        border-image-repeat: space;
        border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image example with all values.</h2>
    <p class="border">border-image: 30% 15px repeat</p>
    <p class="border2">border-image: 20% 10px round;</p>
    <p class="border3">border-image: 15% 20px space;</p>
    <p>Here is the original image used:</p>
    <img src="https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%" />
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester
border-image-source	Spécifie l'image source utilisée pour créer l'image de bordure. Il peut s'agir d'une URL, d'un URI de données, d'un dégradé CSS ou d'un SVG en ligne.
border-image-slice	Spécifie comment découper l'image spécifiée par border-image-source. L'image est toujours découpée en neuf sections : quatre coins, quatre bords et le milieu.	Tester »
border-image-width	Spécifie la largeur de l'image de bordure.
border-image-repeat	Spécifie si l'image de bordure est répétée, arrondie ou étirée.	Tester »
initial	Définit la propriété sur sa valeur par défaut.
inherit	Hérite la propriété de son élément parent.

Practice

Que peut-on affirmer concernant la propriété CSS border-image selon le contenu de l'URL spécifiée ?

La propriété CSS border-image est une propriété raccourcie permettant de définir les propriétés individuelles de l'image de bordure, à savoir border-image-source, border-image-slice, border-image-width, border-image-outset et border-image-repeat, en une seule déclaration.La propriété border-image ne permet pas aux développeurs de spécifier une image à utiliser comme bordure autour d'un élément.La propriété border-image peut être utilisée avec tous les éléments HTML.La propriété CSS border-image ne peut pas être animée et ne s'applique pas aux éléments de tableau lorsque border-collapse est défini sur collapse.La propriété CSS border-image nécessite une seule valeur pour fonctionner.

Propriété border-image CSS ​

Syntaxe ​

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

Résultat ​

Exemple de la propriété border-image avec plusieurs valeurs : ​

Valeurs ​