border-image

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 dessine une image sur la bordure d'un élément.

Exemple interactif

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

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30 /  19px round;

border-image: url("/shared-assets/images/examples/border-diamonds.png") 30  fill / 30px / 30px space;

border-image: linear-gradient(#f6b73c, #4d9f0c) 30;

border-image: repeating-linear-gradient(30deg, #4d9f0c, #9198e5, #4d9f0c 20px)  60;

<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: #000;  border: 30px solid;  border-image: url("/shared-assets/images/examples/border-diamonds.png") 30    round;  font-size: 1.2em;}

Note :Il est préférable d'indiquer un style de bordure distinct avecborder-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 siborder-style vautnone ou siborder-width vaut0.

Propriétés détaillées correspondantes

C'estune 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: revert-layer;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 lavaleur calculée deborder-image-source vautnone ou si l'image ne peut pas être affichée, c'est leborder-style correspondant qui sera affiché.

Valeurs

<'border-image-source'>: L'image source. Voirborder-image-source.
<'border-image-slice'>: La façon dont l'image est découpée en zones (jusqu'à 4). Voirborder-image-slice.
<'border-image-width'>: La largeur de la bordure avec l'image. Voirborder-image-width.
<'border-image-outset'>: La distance entre la bordure et le bord de l'élément. Voirborder-image-outset.
<'border-image-repeat'>: La façon dont l'image source est adaptée afin de correspondre aux dimensions de la bordure. Voirborder-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>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>

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

<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

Utiliser une image

Dans cet exemple, nous allons appliquer un motif en losange aux bordures d'un élément. L'image source pour la bordure est un fichier.png de 81 pixels sur 81, avec trois losanges disposés verticalement et horizontalement :

Huit losanges : quatre losanges rouges, un dans chaque coin, et quatre losanges orange, un sur chaque côté. Le milieu est vide.

HTML

html

<p>  Cet élément est entouré d'une image de bordure au format bitmap !</p>

CSS

Pour correspondre à la taille d'un seul diamant, nous utiliserons une valeur de 81 divisée par 3, soit27, pour découper l'image en zones d'angle et de bord. Pour centrer l'image de bordure sur le bord de l'arrière-plan de l'élément, nous rendrons les valeurs de décalage égales à la moitié des valeurs de largeur. Enfin, une valeur de répétitionround permettra d'ajuster les tranches de bordure de manière uniforme, c'est-à-dire sans découpe ni espace.

css

#bitmap {  width: 200px;  background-color: #ffffaa;  border: 36px solid orange;  margin: 30px;  padding: 10px;  border-image: url("border.png") 27 / 36px 28px 18px 8px / 18px 14px 9px 4px    round;}

Résultat

Utiliser un dégradé

HTML

html

<div>  Cet élément est entouré d'une image de bordure basée sur un dégradé !</div>

CSS

css

#gradient {  width: 200px;  border: 30px solid;  border-image: repeating-linear-gradient(45deg, #ff3333, #33bbff, #ff3333 30px)    60;  padding: 20px;}

Résultat

Utiliser des bordures arrondies

La propriétéborder-radius n'a aucun effet sur l'image de bordure. Cela est dû au fait queborder-image-outset peut placer l'image en dehors de la zone de bordure, il n'est donc pas logique que l'image de bordure soit rognée par la zone de bordure. Pour créer des bordures arrondies lors de l'utilisation d'une image de bordure, vous devez créer l'image elle-même avec des coins arrondis, ou, dans le cas d'un dégradé, le dessiner en tant qu'arrière-plan à la place. Ci-dessous, nous montrons une approche pour ce faire, qui consiste à utiliser deuxbackground-image : l'une qui étend la zone de bordure et une autre pour la zone de remplissage.

HTML

html

<div>  Cet élément est entouré d'une image de bordure avec des coins arrondis !</div>

CSS

css

#rounded {  width: 200px;  /* Utiliser transparent pour que l'image d'arrière-plan soit visible */  border: 10px solid transparent;  padding: 20px;  border-radius: 20px;  background-image:    linear-gradient(white, white), linear-gradient(to right, cyan, lime);  background-origin: border-box;  background-clip: padding-box, border-box;}