La propriété border-image-outset définit la distance avec laquelle la bordure est déplacée par rapport à la boîte de bordure.

Les fragments de l'image de bordure qui sont affichées en dehors de la boîte de bordure suite à l'utilisation de cette propriété n'entraîneront pas la création de barres de défilement. Ces zones ne capturent ni n'entraînent d'événements de pointeur par rapport à l'élément concerné.

Syntaxe

/* border-image-outset :                 */
/* Une même valeur pour les quatre côtés */
border-image-outset: 1.5;

/* border-image-outset :              */
/* Première valeur : côtés verticaux  */
/* Seconde valeur : côtés horizontaux */
border-image-outset: 1 1.2;

/* border-image-outset :               */
/* Première valeur : côté haut         */
/* Deuxième valeur : côtés horizontaux */
/* Troisième valeur : côté bas         */
border-image-outset: 30px 2 45px;

/* border-image-outset :          */
/* Première valeur : côté haut    */
/* Deuxième valeur : côté droit   */
/* Troisième valeur : côté bas    */
/* Quatrième valeur : côté gauche */
border-image-outset: 7px 12px 14px 5px;

/* Valeurs globales */
border-image-outset: inherit;
border-image-outset: initial;
border-image-outset: unset;

Valeurs

<length>
Une valeur de longueur (cf. type <length>) qui indique l'espace duquel on peut dépasser de la boîte de bordure. Les valeurs négatives ne sont pas autorisées.
<number>
Une valeur numérique (cf. type <number>) qui sera multipliée par la valeur calculée de border-width afin de déterminer la longueur de l'espace duquel dépasser.

Syntaxe formelle

[ <length> | <number> ]{1,4}

Exemples

CSS

p {
  border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
  border-image-slice: 30;
  border-image-width: 20px;
  border-image-repeat: round;
  border-image-outset: 10px;
  padding: 40px;
}

HTML

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy 
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
  At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
  no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

Résultat

Spécifications

Spécification État Commentaires
CSS Backgrounds and Borders Module Level 3
La définition de 'border-image-outset' dans cette spécification.
Candidat au statut de recommandation Définition initiale.
Valeur initiale0
Applicabilitétous les éléments sauf les éléments de table internes lorsque border-collapse vaut collapse. S'applique aussi à ::first-letter.
Héritéenon
Médiavisuel
Valeur calculéecomme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animationdiscrète
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
Support simpleChrome Support complet 15Edge Support complet 12Firefox Support complet 15IE Support complet 11Opera Support complet 15Safari Support complet 6WebView Android ? Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 15Opera Android ? Safari iOS ? Samsung Internet Android ?

Légende

Support complet  
Support complet
Compatibilité inconnue  
Compatibilité inconnue

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight
Dernière mise à jour par : SphinxKnight,