L’essentiel en bref
- Le CSS ne peut pas mettre de dégradé dans border-color : une bordure dégradée CSS se dessine donc toujours avec une autre technique.
- border-image avec un dégradé est la méthode la plus courte, mais elle ignore border-radius : elle ne convient qu’aux coins carrés.
- Deux calques d’arrière-plan, l’un découpé à la boîte de remplissage et l’autre à la boîte de bordure, donnent une bordure dégradée arrondie tant que l’intérieur est une couleur unie.
- La technique du masque découpe le centre d’un calque de dégradé, ce qui donne une bordure dégradée arrondie à l’intérieur transparent.
- Un dégradé conique en rotation, piloté par une propriété personnalisée enregistrée avec @property, est la façon habituelle d’animer une bordure dégradée.
Sur cette page
Une bordure dégradée CSS est un contour dont la couleur se fond tout du long. Le hic, c’est que border-color n’accepte que des couleurs, pas des images : il n’existe donc pas de propriété unique. On dessine plutôt le dégradé ailleurs et on n’en montre qu’une fine bande. Il y a quatre méthodes fiables, et la bonne dépend de deux questions : l’élément a-t-il des coins arrondis, et son intérieur doit-il être transparent ?
| Méthode | Coins arrondis | Intérieur transparent | Idéal pour |
|---|---|---|---|
border-image | Non | Oui | Cartes carrées, séparateurs, tableaux |
| Deux arrière-plans | Oui | Non, il faut un remplissage uni | La plupart des cartes et des boutons |
| Masque sur un pseudo-élément | Oui | Oui | Cartes sur des images ou des dégradés |
| Pseudo-élément derrière | Oui | Non | Lueurs et anneaux animés |
Méthode 1 : border-image
border-image accepte n’importe quelle image, dégradé compris. Définissez une largeur et un style de bordure, puis le dégradé, puis un découpage de 1, qui dit au navigateur d’utiliser l’image entière comme bord. Deux lignes, ça marche partout, et l’intérieur de l’élément reste intact.
.panel {
border: 3px solid;
border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;
}1 est la valeur de découpage ; sans lui, la bordure ne se dessine que dans les coins.Méthode 2 : deux arrière-plans avec background-clip
Donnez à l’élément une bordure transparente, puis empilez deux arrière-plans. Le calque du dessus est le remplissage intérieur, découpé à la padding-box, donc il s’arrête au bord intérieur de la bordure. Le calque du dessous est le dégradé, découpé à la border-box, donc il passe sous la bordure. Là où le remplissage s’arrête, le dégradé apparaît, et il suit parfaitement border-radius.
.card {
border: 2px solid transparent;
border-radius: 16px;
background:
linear-gradient(#0f172a, #0f172a) padding-box,
linear-gradient(135deg, #7c3aed, #22d3ee) border-box;
}C’est la méthode à privilégier par défaut. Sa seule limite est que l’intérieur doit être opaque, car un remplissage transparent révélerait le dégradé sur toute la carte. Pour des cartes posées sur une couleur de page unie, ce n’est pas une limite : utilisez la couleur de la page comme remplissage.
Méthode 3 : la technique du masque pour un intérieur transparent
Quand la carte repose sur une photo ou un autre dégradé, le centre doit être transparent. Placez le dégradé sur un pseudo-élément qui couvre la carte, donnez-lui un remplissage égal à la largeur de la bordure, puis masquez-le avec deux calques : l’un ne couvrant que la boîte de contenu et l’autre couvrant tout. Exclure l’un de l’autre ne laisse visible que l’anneau de remplissage.
.glass-card {
position: relative;
border-radius: 16px;
}
.glass-card::before {
content: "";
position: absolute;
inset: 0;
padding: 2px; /* border width */
border-radius: inherit;
background: linear-gradient(135deg, #7c3aed, #22d3ee);
-webkit-mask:
linear-gradient(#000 0 0) content-box,
linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask:
linear-gradient(#000 0 0) content-box exclude,
linear-gradient(#000 0 0);
pointer-events: none;
}mask standard couvre tout ce qui est actuel.pointer-events: none empêche le pseudo-élément d’avaler les clics destinés au contenu de la carte. La référence MDN de mask-composite explique les mots-clés de composition. C’est la méthode derrière la plupart des cartes glassmorphism aux bords lumineux.
Méthode 4 : un pseudo-élément derrière, pour les lueurs et l’animation
Placez un pseudo-élément à dégradé légèrement plus grand que la carte, derrière son contenu, et couvrez le centre avec un second pseudo-élément portant le remplissage uni de la carte. Le bord visible est le dégradé. Comme le dégradé vit sur son propre calque, vous pouvez en flouter une copie pour une lueur, ou le faire tourner.
@property --angle {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.ring {
position: relative;
isolation: isolate;
border-radius: 16px;
}
.ring::before {
content: "";
position: absolute;
inset: -2px;
z-index: -1;
border-radius: 18px;
background: conic-gradient(from var(--angle), #7c3aed, #22d3ee, #f472b6, #7c3aed);
animation: spin 6s linear infinite;
}
/* the card's fill, painted over the middle of the ring */
.ring::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: #0f172a;
}
@keyframes spin {
to { --angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
.ring::before { animation: none; }
}--angle enregistré permet au navigateur d’interpoler en douceur l’angle de départ du conique, et ::after peint le remplissage sur le centre.conic-gradient(from 0deg, #7c3aed, #22d3ee, #f472b6, #7c3aed)Le rayon extérieur doit valoir le rayon intérieur plus la largeur de la bordure, c’est pourquoi le pseudo-élément utilise 18px autour d’une carte de 16px. Pour d’autres façons d’animer les dégradés, voyez les dégradés animés en CSS.
Conseils de design pour les bordures dégradées
À éviter
- Des bordures dégradées sur chaque carte d’une grille
- Des dégradés peu saturés sur une ligne de 1px, qui paraissent gris
- Une bordure dégradée et un remplissage dégradé sur le même élément
- Des anneaux qui tournent vite autour de contenu à lire
À faire
- Réserver le bord dégradé à un élément mis en avant, comme une offre phare
- Utiliser 2px ou plus et des arrêts saturés
- Un remplissage calme avec un bord vif, ou l’inverse
- Une rotation lente, mise en pause pour le mouvement réduit
Les bordures dégradées fonctionnent mieux comme accent. La même logique vaut pour les boutons, traités dans les boutons dégradés en CSS.
Les questions qu’on nous pose
Comment faire une bordure dégradée en CSS ?
Le plus rapide : border: 3px solid; border-image: linear-gradient(135deg, #7c3aed, #22d3ee) 1;. Pour des coins arrondis, utilisez deux arrière-plans découpés à padding-box et border-box.
Pourquoi border-radius ne fonctionne-t-il pas avec border-image ?
Selon la spécification, une bordure dessinée avec border-image n’est pas arrondie par border-radius. Utilisez la méthode background-clip ou celle du masque pour des bordures dégradées arrondies.
Comment faire une bordure dégradée avec un arrière-plan transparent ?
Utilisez la technique du masque : un pseudo-élément avec le dégradé, un remplissage égal à la largeur de la bordure et un masque qui exclut sa boîte de contenu.
Comment animer une bordure dégradée ?
Enregistrez un angle avec @property, utilisez-le comme angle from d’un dégradé conique sur un pseudo-élément, et animez cette propriété de 0deg à 360deg.
Quelle méthode de bordure dégradée choisir ?
Deux arrière-plans pour la plupart des cartes et boutons arrondis, border-image pour les bords carrés, et la technique du masque seulement quand l’intérieur doit rester transparent.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
