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
/* 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 :
|
---|---|
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 :
|
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :
|
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
<div id="bitmap">L'image est étirée pour remplir l'espace.</div>
CSS
#bitmap {
border: 30px solid transparent;
padding: 20px;
border-image: url("border.png") 30;
}
Résultat
Utiliser un dégradé
HTML
<div id="gradient">
L'image formée par le dégradé est étirée pour remplir la zone.
</div>
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
Voir aussi
-
La fonction
url()
-
Fonctions pour les dégradés :