Propriété CSS border-image-outset - Apprendre CSS

La propriété CSS border-image-outset indique la distance de laquelle la zone de l'image de bordure dépasse au-delà de la boîte de bordure de l'élément. C'est l'une des propriétés CSS3.

Par défaut, une image de bordure est dessinée à l'intérieur de la boîte de bordure. La repousser vers l'extérieur avec border-image-outset est utile lorsque vous souhaitez que le cadre décoratif déborde sur l'élément — par exemple, une bordure ornementale, un cadre façon ombre portée, ou un effet de ruban devant se placer en dehors du contenu plutôt que de l'encombrer.

Le dépassement modifie uniquement l'endroit où l'image est dessinée ; il n'affecte pas la taille de la boîte de l'élément ni sa mise en page. La zone supplémentaire peut chevaucher le contenu voisin, il convient donc de prévoir suffisamment d'espace (ou une marge supplémentaire) autour de l'élément pour éviter tout rognage ou chevauchement.

Fonctionnement

border-image-outset accepte de une à quatre valeurs, selon le modèle CSS standard haut–droite–bas–gauche :

Une valeur définit les quatre dépassements.
Deux valeurs — la première définit le haut et le bas, la seconde définit la droite et la gauche.
Trois valeurs — la première définit le haut, la seconde la droite et la gauche, la troisième le bas.
Quatre valeurs s'appliquent aux côtés haut, droit, bas et gauche, dans cet ordre.

Chaque valeur peut être soit une <length> (comme 10px), soit un <number> sans unité. Un nombre est un multiple de la largeur de bordure correspondante de l'élément : avec border-width: 10px, un dépassement de 2 équivaut à 20px. Les valeurs négatives ne sont pas autorisées.

La propriété n'a aucun effet visible si aucune source d'image de bordure n'est définie (via border-image ou border-image-source).

Valeur initiale	0
S'applique à	Tous les éléments, sauf les éléments internes de tableau lorsque border-collapse vaut « collapse ». S'applique également à ::first-letter.
Hérité	Non.
Animable	Non.
Version	CSS3
Syntaxe DOM	object.style.borderImageOutset = "20px";

Syntaxe

Valeurs CSS de border-image-outset

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

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

Exemple de code CSS border-image-outset

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the 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>Border-image-outset property example</h2>
    <p class="border">Hello World!</p>
    <p>Here is the original image:</p>
    <img src="/uploads/media/default/0001/01/812bf6a749522b8185c1beee20dd99dd6c6c87da.jpeg" alt="Border Image" style="width:50%" />
  </body>
</html>

Essayez vous-même »

Résultat

![Description CSS border-image-outset](/uploads/media/default/0001/04/9e351aa1549808ee733c6e1e41ae3509c9b7611e.png "Exemple CSS border-image-outset" =420x)

Dans l'exemple ci-dessus, l'image de bordure dépasse de 10px au-delà du bord supérieur, reste alignée à droite (0) et dépasse de 15px au-delà du bord inférieur — le cadre déborde ainsi visiblement sur le paragraphe.

Valeurs

Valeur	Description	Essayer
`length`	La distance de laquelle l'image de bordure dépasse au-delà de la boîte de bordure, exprimée dans n'importe quelle unité de longueur CSS (`px`, `em`, etc.). La valeur par défaut est `0`.	Essayer »
`number`	Un multiple sans unité de la largeur de bordure correspondante de l'élément. Par exemple, `2` avec une bordure de `10px` équivaut à `20px`.	Essayer »
`initial`	Définit la propriété à sa valeur par défaut (`0`).	Essayer »
`inherit`	Hérite la propriété de son élément parent.

Propriétés associées

border-image-outset fait partie de la propriété raccourcie border-image. Ces propriétés complémentaires contrôlent le reste de l'effet :

border-image — la propriété raccourcie qui définit toutes les valeurs de border-image en une fois.
border-image-source — l'image à utiliser comme bordure.
border-image-slice — la façon dont l'image source est découpée en neuf régions de bordure.
border-image-width — la largeur de la zone d'image de bordure.
border-image-repeat — si les tranches sont étirées, répétées ou arrondies.

Pratique

Quel est le rôle de la propriété 'border-image-outset' en CSS ?

Elle est utilisée pour définir l'image de bordure d'un élément.Elle est utilisée pour modifier la couleur d'arrière-plan d'un élément.Elle est utilisée pour étendre la zone d'image de bordure au-delà de la bordure d'un élément.Elle est utilisée pour limiter la zone d'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.