border-image-source

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é CSS border-image-source définit l'image source utilisée pour créer l'image de bordure d'un élément.

La propriété border-image-slice permet de diviser l'image source en régions, qui sont ensuite appliquées dynamiquement à la bordure imagée finale.

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">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

/* Valeur avec un mot-clé */
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: revert;
border-image-source: revert-layer;
border-image-source: unset;

Valeurs

none: Aucune image de bordure n'est utilisée. L'apparence définie par border-style est affichée à la place.
<image>: Référence de l'image à utiliser pour la bordure.

Définition formelle

Valeur initiale	`none`
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	`none` ou l'image avec son URI rendue absolue
Type d'animation	discrète

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

Exemple simple

css

.box {
  border-image-source: url("image.png");
}

Spécifications

Specification
CSS Backgrounds and Borders Module Level 3 # border-image-source

Compatibilité des navigateurs

Voir aussi

La propriété border
La propriété outline
La propriété box-shadow
La propriété background-image
Le type de donnée <url>
Images de bordure dans CSS : un domaine clé pour l'Interop 2023 sur le blog MDN (2023)

Help improve MDN

Learn how to contribute

Cette page a été modifiée le 30 janv. 2026 par les contributeurs du MDN.

View this page on GitHub • Report a problem with this content