Propriété CSS border-image-outset

La propriété CSS border-image-outset spécifie le nombre par lequel l'image de la bordure est déplacée par rapport à la boîte de bordure.

La propriété border-image-outset prend d'une à quatre valeurs de côté.

  • Lorsqu'une valeur est spécifiée, elle spécifie tous les quatres côtés.
  • Lorsque deux valeurs sont spécifiées, la première spécifie le côté haut et bas, et la deuxième spécifie les côtés droit et gauche.
  • Lorsque trois valeurs sont spécifiée, la première spécifie le côté haut, la deuxième spécifie les côtés droit et gauche, et la troisième spécifie le côté bas.
  • Lorsque quatre valeurs sont spécifiées, elles définissent respectivement les côtés haut, droit, bas et gauche .
Valeur initiale 0
Appliquée à Tous les éléments, sauf les éléments de table internes lorsque border-collapse est "collapse". Elle est aussi appliquée à ::first-letter.
Héritée Non.
Animable Non.
Version CSS3
Syntaxe DOM object.style.borderImageOutset = "20px";

Syntaxe

border-image-outset: length | number | 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" );
      border-image-slice: 30;
      border-image-repeat: round;
      border-image-outset:10px 0 15px;
      }
    </style>
  </head>
  <body>
    <h2>Exemple de la propriété border-image-outset</h2>
    <p class="border">Bonjour, le Monde!</p>
    <p>Voici l'image originelle:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%">
  </body>
</html>

Valeurs

Valeur Description
length Spécifie la distence des bords à laquelle l'image de la bordure va appaître. La valeur initiale est 0.
number La taille des côtés de l'image de bordure comme un multiple des largeurs correspondantes de la bordure de l'élément.
initial Fait utiliser la valeur initiale.
inherit Hérite la propriété de son élément parent.

Support de Navigateurs

15.0+ 12.0+ 15.0+ 6.0+ 15.0+


Trouvez-vous cela utile?

Articles Associées