border-image-outset

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

La propriétéCSSborder-image-outset définit la distance de dépassement de l'image de bordure d'un élément par rapport à sa boîte de bordure.

Les parties de l'image de bordure qui sont affichées en dehors de la boîte de bordure de l'élément avecborder-image-outset ne déclenchent pas de barres de défilement d'overflow et ne capturent pas les évènements de souris.

Exemple interactif

border-image-outset: 0;

border-image-outset: 15px;

border-image-outset: 30px;

border-image-outset: 40px;

<section>  <div>Ceci est une boîte entourée d'une bordure.</div></section>

#example-element {  width: 80%;  height: 80%;  display: flex;  align-items: center;  justify-content: center;  padding: 50px;  background: #fff3d4;  color: black;  border: 30px solid;  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30    round;  font-size: 1.2em;}

Syntaxe

css

/* Valeurs de type <length> */border-image-outset: 1rem;/* Valeurs de type <number> */border-image-outset: 1.5;/* côtés verticaux | horizontaux */border-image-outset: 1 1.2;/* haut | côtés horizontaux | bas */border-image-outset: 30px 2 45px;/* haut | droit | bas | gauche */border-image-outset: 7px 12px 14px 5px;/* Valeurs globales */border-image-outset: inherit;border-image-outset: initial;border-image-outset: revert;border-image-outset: revert-layer;border-image-outset: unset;

La propriétéborder-image-outset peut être définie à l'aide d'une, deux, trois ou quatre valeurs. Chaque valeur est une longueur (<length>) ou un nombre (<number>). Les valeurs négatives sont invalides (la déclaration est alors ignorée).

Siune valeur est indiquée, elle s'appliqueaux quatre côtés.
Sideux valeurs sont indiquées, la première s'applique aux côtéshaut et bas et la seconde s'applique aux côtésgauche et droit.
Sitrois valeurs sont indiquées, la première s'applique au côtéhaut, la deuxième aux côtésgauche et droit, et la troisième au côtébas.
Siquatre valeurs sont indiquées, elles s'appliquent dans le sens des aiguilles d'une montre : la première au côtéhaut, la seconde au côtédroit, la troisième au côtébas, et la quatrième au côtégauche.

Valeurs

<length>: La taille du dépassement de l'image de bordure en tant que dimension — un nombre avec une unité.
<number>: La taille du dépassement de l'image de bordure en tant que multiple des largeurs des bordures (border-width) correspondantes de l'élément. Par exemple, si un élément aborder-width: 1em 2px 0 1.5rem etborder-image-outset: 2, la valeur finale deborder-image-outset sera calculée comme2em 4px 0 3rem.

Définition formelle

Valeur initiale	`0`
Applicabilité	tous les éléments sauf les éléments de table internes lorsque`border-collapse` vaut`collapse`. S'applique aussi à`::first-letter`.
Héritée	non
Valeur calculée	comme défini, mais avec les longueurs relatives converties en longueurs absolues
Type d'animation	par type de valeur calculée

Syntaxe formelle

border-image-outset =
[<length [0,∞]>|<number [0,∞]>]{1,4}

Exemples

Décaler la bordure d'une image

HTML

html

<div>Un élément avec une bordure décalée&nbsp;!</div>

CSS

css

#outset {  width: 10rem;  background: #cceeff;  border: 1.4rem solid;  border-image: radial-gradient(#ffff22, #5555ff) 40;  border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */  margin: 2.1rem;}