border-image-source

La propriété border-image-source définit l'image (type <image>) qu'on souhaite utiliser pour mettre en forme la bordure. Si la valeur de cette propriété vaut none, ce sera la mise en forme définie par la propriété border-style qui sera utilisée.

Exemple interactif

border-image-source: url("/shared-assets/images/examples/border-diamonds.png");

border-image-source: url("/shared-assets/images/examples/border-stars.png");

border-image-source: repeating-linear-gradient(
 45deg,
 transparent,
 #4d9f0c 20px
);

border-image-source: none;

<section id="default-example">
 <div id="example-element">This is a box with a border around it.</div>
</section>

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

Syntaxe

/* Valeur avec un mot-clé */
/* Ici, pas de border-image, */
/* on utilise border-style */
border-image-source: none;
/* Valeur de type <image> */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);
/* Valeurs globales */
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;

La propriété border-image-slice peut être utilisée afin de diviser une image source en régions qui seront insérées dynamiquement pour constituer la bordure imagée finale.

Valeurs

none

Cette valeur permet d'indiquer qu'aucune image ne doit être utilisée pour la bordure. Ce sera le style défini par la propriété border-style qui sera utilisé.

<image>

Une référence vers l'Image qu'on souhaite utiliser pour dessiner la bordure. Voir <image>.

Définition formelle

Syntaxe formelle

border-image-source = 
 none | 
 <image> 

<image> = 
 <url> | 
 <image()> | 
 <image-set()> | 
 <cross-fade()> | 
 <element()> | 
 <gradient> 

<image()> = 
 image( <image-tags>? [ <image-src>? , <color> ? ]! ) 

<image-set()> = 
 image-set( <image-set-option># ) 

<cross-fade()> = 
 cross-fade( <cf-image># ) 

<element()> = 
 element( <id-selector> ) 

<image-tags> = 
 ltr | 
 rtl 

<image-src> = 
 <url> | 
 <string> 

<image-set-option> = 
 [ <image> | <string> ] [ <resolution> || type( <string> ) ] ? 

<cf-image> = 
 [ <image> | <color> ] && 
 <percentage [0,100]> ? 

<id-selector> = 
 <hash-token> 

Exemples

Voir la page de la propriété raccourcie border-image et les différents exemples.

Spécifications

Compatibilité des navigateurs

Voir aussi

• border
• outline
• box-shadow
• background-image
• url()