Propriété CSS border-image-outset

La propriété CSS border-image-outset spécifie la quantité dont l'image de bordure est étendue au-delà de la boîte de bordure de l'élément. Il s'agit de l'une des propriétés CSS3. La propriété border-image-outset accepte de une à quatre valeurs.

Lorsqu'une seule valeur est spécifiée, elle s'applique aux quatre côtés.
Lorsque deux valeurs sont spécifiées, la première concerne les côtés haut et bas, et la seconde les côtés droit et gauche.
Lorsque trois valeurs sont spécifiées, la première concerne le côté haut, la seconde les côtés droit et gauche, et la troisième le côté bas.
Lorsque quatre valeurs sont spécifiées, les valeurs sont appliquées dans l'ordre : haut, droit, bas et gauche.

Valeur initiale	0
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.borderImageOutset = "20px";

Syntaxe

Valeurs CSS border-image-outset

css

border-image-outset: length | number | initial | inherit;

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

Exemple de code CSS border-image-outset

html

<!DOCTYPE html>
<html>
  <head>
    <title>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");
        border-image-slice: 30;
        border-image-repeat: round;
        border-image-outset: 10px 0 15px;
      }
    </style>
  </head>
  <body>
    <h2>Border-image-outset property example</h2>
    <p class="border">Hello World!</p>
    <p>Here is the original image:</p>
    <img src="https://fr.w3docs.com/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%" />
  </body>
</html>

Try it Yourself »

Résultat

Description de CSS border-image-outset

Valeurs

Valeur	Description	Tester »
length	Spécifie à quelle distance des bords l'image de bordure apparaîtra. La valeur par défaut est 0.	Tester »
number	La taille du débordement de l'image de bordure en tant que multiple des largeurs de bordure correspondantes de l'élément.	Tester »
initial	Définit la propriété à sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.

Pratique

Quel est l'utilité de la propriété 'border-image-outset' en CSS ?

Elle est utilisée pour définir la bordure image d'un élément.Elle est utilisée pour changer la couleur de fond d'un élément.Elle est utilisée pour étendre la zone de l'image de bordure au-delà de la bordure d'un élément.Elle est utilisée pour limiter la zone de l'image de bordure à l'intérieur de la bordure d'un élément.Elle est utilisée pour définir la taille de police d'un élément.

Propriété CSS border-image-outset ​

Syntaxe ​

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

Résultat ​