Propriété CSS border-image

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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>

Essayez-vous-même!

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.