border-image

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since February 2017.

La propriété border-image dessine une image sur la bordure d'un élément.

Exemple interactif

Note : Il est préférable d'indiquer un style de bordure distinct avec border-style dans le cas où l'image ne chargerait pas. Bien que la spécification ne le nécessite pas, certains navigateurs n'affichent pas l'image de bordure si border-style vaut none ou si border-width vaut 0.

Propriétés détaillées correspondantes

C'est une propriété raccourcie qui permet de définir :

Syntaxe

css

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

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

La propriété border-image peut être définie avec une à cinq valeurs parmi celles définies ci-après.

Note : Si la valeur calculée de border-image-source vaut none ou si l'image ne peut pas être affichée, c'est le border-style correspondant qui sera affiché.

Valeurs

border-image-source: L'image source. Voir border-image-source.
border-image-slice: La façon dont l'image est découpée en zones (jusqu'à 4). Voir border-image-slice.
border-image-width: La largeur de la bordure avec l'image. Voir border-image-width.
border-image-outset: La distance entre la bordure et le bord de l'élément. Voir border-image-outset.
border-image-repeat: La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voir border-image-repeat.

Accessibilité

Les technologies d'assistance ne peuvent pas analyser les images de bordure. Si l'image contient des informations essentielles au sens de la page, mieux vaut décrire ces informations dans le contenu sémantique du document.

Définition formelle

Valeur initiale	pour chaque propriété individuelle de la propriété raccourcie : `border-image-source`: `none` `border-image-slice`: `100%` `border-image-width`: `1` `border-image-outset`: `0` `border-image-repeat`: `stretch`
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
Pourcentages	pour chaque propriété individuelle de la propriété raccourcie : `border-image-slice`: se rapporte à la taille de l'image de bordure `border-image-width`: se rapporte à la largeur ou la hauteur de la zone de l'image de bordure
Valeur calculée	pour chaque propriété individuelle de la propriété raccourcie : `border-image-outset`: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues `border-image-repeat`: comme spécifié `border-image-slice`: un à quatre pourcentages, comme spécifiés, ou des longueurs absolues, suivis par le mot-clé `fill` si spécifié `border-image-source`: `none` ou l'image avec son URI rendue absolue `border-image-width`: comme spécifié, mais avec les longueurs relatives converties en longueurs absolues
Type d'animation	pour chaque propriété individuelle de la propriété raccourcie : `border-image-outset`: by computed value type `border-image-repeat`: discrète `border-image-slice`: by computed value type `border-image-source`: discrète `border-image-width`: by computed value type

Syntaxe formelle

border-image = 
  <'border-image-source'>                             ||
  <'border-image-slice'> [ / <'border-image-width'> | / <'border-image-width'>? / <'border-image-outset'> ]?  ||
  <'border-image-repeat'>                             

<border-image-source> = 
  none     |
  <image>  

<border-image-slice> = 
  [ <number [0,∞]> | <percentage [0,∞]> ]{1,4}  &&
  fill?                                         

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

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

<border-image-repeat> = 
  [ stretch | repeat | round | space ]{1,2}  

<image> = 
  <url>       |
  <gradient>  

<length-percentage> = 
  <length>      |
  <percentage>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Exemples

Utiliser une image matricielle étirée

On découpe l'image et on la répète pour remplir la zone entre les bordures.

HTML

html

<div id="bitmap">L'image est étirée pour remplir l'espace.</div>

CSS

css

#bitmap {
  border: 30px solid transparent;
  padding: 20px;
  border-image: url("border.png") 30;
}

Résultat

Utiliser un dégradé

HTML

html

<div id="gradient">
  L'image formée par le dégradé est étirée pour remplir la zone.
</div>

CSS

css

#gradient {
  border: 30px solid;
  border-image: linear-gradient(red, yellow) 10;
  padding: 20px;
}

Résultat

Spécifications

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

Compatibilité des navigateurs

BCD tables only load in the browser