Propriété CSS border-image

La propriété raccourcie border-image permet de spécifier une image comme la bordure autour d'un élément. À l'aide des autres propriétés de la bordure d'image, cette propriété est spécifiée. Les valeurs omises sont définies à lauer valeurs initiales. Voyons quelques notes sur chaque valeur:

  • border-image-source - Si la valeur est "none", ou si l'image ne peut pas être affichée, les styles de bordure seront appliqués.
  • border-image-slice -La partie moyenne de l'image est traitée comme si elle est complètement transparent, à moins que la valeur "fill" soit définie.
  • border-image-width - Si la valeur de cette propriété est supérieure à border-width de l'élément, l'image de bordure prolongera au delà de bord padding (et/ou content). Vous devez savoir aussi que cette propriété peut être spécifiée en utilisant une, deux, trois ou quatre valeurs.
  • border-image-outset - Cela aussi peut être spécifiée en utilisant une, deux, trois ou quatre valeurs.
  • border-image-repeat - Elle peut être spécifiée avec deux valeurs. Si la deuxième valeur est omise, on suppose qu'elle est la même que la première. Si on ne définit q'une valeur, elle applique le même comportement sur tous les quatres côtés; si on définit deux valeurs, la première s'applique aux côtés supérieur et inférieur, la deuxième au droit et au gauche.
Valeur initiale none 100% 1 0 stretch
Appliquée à Tous les éléments, à l'exception des éléments de table intérieure quand border-collapse est "collapse". Elle est aussi appliquée à pseudo-élément ::first-letter.
Héritée Non
Animable Non
Version CSS3
Syntaxe DOM object.style.borderImage = "url(border.png) 30 round"

Syntaxe

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

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice: 10%;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-image-slice</h2>
    <p class="border">border-image: 10% round;</p>
    <p>Ici on a utilisée l'image originelle:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Voici un autre exemple avec des valeurs différentes.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .border {
      border: 10px solid transparent;
      padding: 15px;
      border-image: url(/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(/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(/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg) round;
      border-image-slice: 15%;
      border-image-repeat: space;
      border-image-width: 20px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de border-image avec toutes les valeurs.</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>Voici l'image originelle utilisée:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" style="width:50%">
  </body>
</html>

Valeurs

Valeur Description
border-image-source Spécifie la source de l'image qui est utilisée pour créer la bordure d'image. Ça peut être un URL, data URI, CSS gradient, ou SVG en ligne.
border-image-slice Spécifie comment couper l'image spécifiée par border-image-source. L'image est toujours coupée en neuves séctions: quatre coins, quatres bords et le milieu.
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, cerclé ou extensible.
initial Définit la valeur initiale.
inherit Hérite la propriété de l'élément parent.

Support de Navigateurs

16.0+ 12.0+ 15.0+ 6.0+ 11.0+


Trouvez-vous cela utile?

Articles Associées