Border-image - Astuces CSS | CSS Almanach 2025

border-image est une propriété abrégée qui vous permet d'utiliser une image ou un dégradé CSS comme bordure d'un élément.

.module ( border-image: url(border.png.webp) 25 25 round; )

La border-imagepropriété peut être appliquée à n'importe quel élément, à l'exception des éléments de table internes (par exemple tr, th, td) lorsque border-collapseest défini sur collapse.

Propriétés

La seule propriété requise pour la border-imagesténographie est border-image-source. Les autres propriétés reprennent par défaut leurs valeurs initiales si elles ne sont pas spécifiées. Voici les border-imagepropriétés dans l'ordre:

`border-image-source`

.module ( border-image-source: url(border.png.webp); )

Cette propriété spécifie la source de l'image de bordure. Cela peut être une URL, un URI de données, un dégradé CSS ou un SVG en ligne (bien que la prise en charge soit limitée pour le SVG en ligne, voir les notes d'utilisation de SVG).

La valeur initiale est none.

`border-image-slice`

.module ( border-image-source: url(border.png.webp); border-image-slice: 20; )

Les valeurs de cette propriété indiquent au navigateur où «découper» l'image pour créer les morceaux de la bordure. L'image est divisée en 9 sections - les quatre coins, les quatre côtés et le centre.

Huit cœurs dans une image «cadre», agrandie pour montrer les détails. Les lignes rouges indiquent les tranches.

Si vous pensez que cela semble absurde, vous êtes en bonne compagnie. Il y a quelques années, il y a eu une longue discussion sur le sujet sur le blog d'Eric Myer, où de nombreux grands du développement frontend ont pesé.

Dans cette démo, un cœur se répète autour de la frontière du div. L' border-image-sourceimage est une image composite de huit de la même icône de cœur, découpée en tranches de sorte que la forme du cœur complet soit utilisée de chaque côté de l'élément.

Voir la démo Pen border-image: icon border par CSS-Tricks (@ css-tricks) sur CodePen.

Plus de notes d'utilisation

Bien que la prise en charge de se border-imagesoit améliorée - elle est prise en charge sans préfixe dans toutes les versions actuelles du navigateur - la définition d'un borderstyle de secours en vaut la peine. Votre bordure de secours s'affichera sur les navigateurs qui ne prennent pas en charge border-image, ou si l'image ne se charge pas.

Contrairement à certaines des autres propriétés de bordure, border-imagene peut pas être animé. Il ne peut pas non plus être coiffé avec border-radius.

Si vous déclarez a border-image-sourceet une borderlargeur ou border-image-widthsans aucune tranche, toute l'image non découpée sera placée aux quatre coins de l'élément, à l'échelle de votre largeur spécifiée.

En rapport

border
border-collapse
box-sizing

Plus d'information

border-image dans le module CSS Background and Borders Niveau 3 CR
border-image chez MDN
border-image.com, cet outil vous permet de télécharger une image et de jouer avec les tranches de bordure jusqu'à ce que vous les obteniez correctement, puis il génère le CSS pour vous.
Image de la frontière expliquée de Dudley Storey.

Plus de démos

Aussi de Dudley Storey, Pratique border-image: cadre photo réactif, une démo CodePen. Ceci est un bon exemple d'utilisation judicieuse d'une image de bordure sur une image réactive. Notez que le «cadre» est supprimé pour les tailles d'écran plus petites.
De véritables bordures en pointillé utilisant SVG et border-image, un stylo de Lucas Lemonnier. Une solution pour la vilaine bordure carrée «pointillée», cette méthode vous donne de vrais points ronds!
bouton dégradé, un Pen par l'utilisateur de CodePen GSSxGSS. Un joli exemple de dégradé linéaire comme image de bordure.
Film Strip, un stylo de Nick Pettit. Peut-être pas la démo la plus pratique, c'est un exemple amusant et arty de ce que vous pouvez faire border-image.

Prise en charge du navigateur

border-imagepréfixes de fournisseur initialement requis sur tous les navigateurs qui le prenaient en charge. Maintenant, cela fonctionne sans préfixe dans la dernière version de tous les navigateurs. Ce tableau montre à la fois le support avec préfixe le plus ancien et le support sans préfixe le plus ancien, le cas échéant.