Propriété CSS border-image-outset

❮ Précédent Suivant ❯

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>

Essayez-vous-même!

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.