border-image

Remplace une bordure classique par une image ou un dégradé découpé en coins et en bords.

Valeur initiale: none 100% / 1 / 0 stretch
Héritée: Non
Animable: partiellement : découpage, épaisseur et débord oui, image et répétition non
S’applique à: tous les éléments sauf les éléments internes des tableaux avec border-collapse: collapse
JavaScript: element.style.borderImage = "linear-gradient(#7c3aed, #0ea5e9) 1"

Sur cette page

Exemple
Définition et utilisation
Syntaxe
Valeurs
Valeurs en pratique
Plus d’exemples
Compatibilité des navigateurs
Bonnes pratiques
Entrées associées

Exemple

CSS

.plan {
  padding: 16px;
  border: 3px solid #7c3aed;
  border-image: linear-gradient(135deg, #7c3aed, #0ea5e9, #10b981) 1;
}

HTML de l’exemple

<article class="plan">
  <strong>Premium</strong>
  <p style="margin: 4px 0 0; color: #a1a1aa;">Sans limite de carburant, et avec l’accès à tous les mondes.</p>
</article>

Aperçu

Définition et utilisation

La propriété border-image dessine une bordure à partir d’une image plutôt que d’une ligne. Le navigateur découpe l’image en neuf parties, comme une grille de morpion : les quatre coins vont dans les coins du cadre, les quatre bords sont étirés ou répétés le long des côtés, et le centre reste vide par défaut.

C’est un raccourci pour cinq propriétés : border-image-source (l’image ou le dégradé), border-image-slice (où découper : un nombre sans unité désigne des pixels de l’image, des pourcentages fonctionnent aussi), border-image-width (l’épaisseur du cadre), border-image-outset (de combien faire dépasser le cadre vers l’extérieur) et border-image-repeat (comment remplir les côtés : stretch, repeat, round ou space). Le mot-clé fill sur le découpage fait aussi dessiner le centre.

L’image se place à l’emplacement de la bordure, donc l’élément a besoin d’une bordure avec une épaisseur et un style, par exemple border: 12px solid #7c3aed. Sans style, l’épaisseur de la bordure vaut 0 et l’image ne s’affiche pas, et la couleur de cette déclaration servira de secours si l’image ne se charge pas.

Aujourd’hui, vous rencontrerez surtout border-image associée à un dégradé : linear-gradient(…) 1 donne un cadre coloré sans aucun fichier image. Souvenez-vous seulement que border-radius n’arrondit pas une image de bordure. Un cadre arrondi avec un dégradé se construit avec deux couches de fond, comme le montre l’exemple supplémentaire.

Syntaxe

border-image: <source> || <découpage> [ / <épaisseur> | / <épaisseur>? / <débord> ]? || <répétition>;

Valeurs

none
Pas d’image : on voit la simple bordure grise de la déclaration border. À gauche se trouve l’image source de 60 × 60px utilisée par les autres exemples, avec des lignes de découpe tous les 20px.
stretch
répétition des bords
La variable --frame contient l’image de gauche, et le découpage 20 la coupe tous les 20px. Les bords s’étirent sur toute la longueur du côté, donc les cercles se transforment en ellipses. C’est la valeur par défaut.
repeat
répétition des bords
Les tuiles des bords se répètent à partir du milieu du côté. Elles peuvent être coupées en deux près des coins.
round
répétition des bords
Les tuiles se répètent et sont légèrement mises à l’échelle pour qu’un nombre entier d’entre elles tienne sur le côté. Rien n’est coupé.
space
répétition des bords
Seules des tuiles entières, sans mise à l’échelle, restent sur le côté, et l’espace libre se répartit également entre elles.
fill
découpage avec remplissage
Le mot-clé fill dans le découpage dessine aussi le centre de l’image, soit le cercle bleu ciel, répété ici sur toute la surface intérieure comme un fond supplémentaire.
linear-gradient(…) 1
dégradé comme source
Un dégradé à la place d’un fichier. Le découpage 1 fait que les bords forment un cadre coloré continu.

Valeur	Type	Description
none		Pas d’image : on voit la simple bordure grise de la déclaration `border`. À gauche se trouve l’image source de 60 × 60px utilisée par les autres exemples, avec des lignes de découpe tous les 20px.
stretch	répétition des bords	La variable `--frame` contient l’image de gauche, et le découpage `20` la coupe tous les 20px. Les bords s’étirent sur toute la longueur du côté, donc les cercles se transforment en ellipses. C’est la valeur par défaut.
repeat	répétition des bords	Les tuiles des bords se répètent à partir du milieu du côté. Elles peuvent être coupées en deux près des coins.
round	répétition des bords	Les tuiles se répètent et sont légèrement mises à l’échelle pour qu’un nombre entier d’entre elles tienne sur le côté. Rien n’est coupé.
space	répétition des bords	Seules des tuiles entières, sans mise à l’échelle, restent sur le côté, et l’espace libre se répartit également entre elles.
fill	découpage avec remplissage	Le mot-clé `fill` dans le découpage dessine aussi le centre de l’image, soit le cercle bleu ciel, répété ici sur toute la surface intérieure comme un fond supplémentaire.
linear-gradient(…) 1	dégradé comme source	Un dégradé à la place d’un fichier. Le découpage `1` fait que les bords forment un cadre coloré continu.

Valeurs en pratique

none

Pas d’image : on voit la simple bordure grise de la déclaration border. À gauche se trouve l’image source de 60 × 60px utilisée par les autres exemples, avec des lignes de découpe tous les 20px.

.demo { border-image: none; }

stretch

La variable --frame contient l’image de gauche, et le découpage 20 la coupe tous les 20px. Les bords s’étirent sur toute la longueur du côté, donc les cercles se transforment en ellipses. C’est la valeur par défaut.

.demo { border-image: var(--frame) 20 stretch; }

repeat

Les tuiles des bords se répètent à partir du milieu du côté. Elles peuvent être coupées en deux près des coins.

.demo { border-image: var(--frame) 20 repeat; }

round

Les tuiles se répètent et sont légèrement mises à l’échelle pour qu’un nombre entier d’entre elles tienne sur le côté. Rien n’est coupé.

.demo { border-image: var(--frame) 20 round; }

space

Seules des tuiles entières, sans mise à l’échelle, restent sur le côté, et l’espace libre se répartit également entre elles.

.demo { border-image: var(--frame) 20 space; }

fill

Le mot-clé fill dans le découpage dessine aussi le centre de l’image, soit le cercle bleu ciel, répété ici sur toute la surface intérieure comme un fond supplémentaire.

.demo { border-image: var(--frame) 20 fill round; }

linear-gradient(…) 1

Un dégradé à la place d’un fichier. Le découpage 1 fait que les bords forment un cadre coloré continu.

.demo { border-width: 6px; border-image: linear-gradient(135deg, #7c3aed, #0ea5e9) 1; }

Plus d’exemples

Cadre arrondi avec un dégradé

CSS

.plan {
  padding: 16px;
  border: 3px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(#18181b, #18181b) padding-box,
    linear-gradient(135deg, #7c3aed, #0ea5e9, #10b981) border-box;
}

HTML de l’exemple

<article class="plan">
  <strong>Premium</strong>
  <p style="margin: 4px 0 0; color: #a1a1aa;">Sans limite de carburant, et avec l’accès à tous les mondes.</p>
</article>

Aperçu

border-image ignore border-radius, donc un cadre arrondi se construit différemment. La première couche de fond remplit l’intérieur (padding-box), et la seconde, avec le dégradé, ne transparaît qu’à travers la bordure transparente (border-box).

Compatibilité des navigateurs

Largement disponible

Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.

Chrome
Edge
Firefox
Safari

Bonnes pratiques

Avec un dégradé, indiquez toujours un découpage, le plus souvent 1. Le raccourci sans découpage utilise la valeur par défaut 100% : toute l’image atterrit alors dans les coins, et les côtés restent vides.
Pour des cadres décoratifs à motif, choisissez round ou space. Avec repeat, les tuiles près des coins sont parfois coupées, et stretch déforme le motif.
Vous ne pouvez pas créer de cadre arrondi avec border-image. Utilisez une bordure transparente et deux couches de fond avec padding-box et border-box.

Entrées associées

Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.

Leçons gratuitesPratiquez CSS dans le cours HTML et CSSDes exercices avec indices, un éditeur de code et une progression enregistrée au fur et à mesure.Voir le cours