Générateur de bordure dégradée (CSS)
Choisissez les couleurs, l’épaisseur et les coins. Le code utilise deux couches d’arrière-plan, la méthode qui garde border-radius fonctionnel.
Mode d’emploiBordure colorée en dégradé
Disponible en: 
Générateur de bordure dégradée (CSS): à quoi ça sert
La façon évidente de faire une bordure dégradée, border-image, ignore les coins arrondis. Ce générateur utilise la technique des deux couches d’arrière-plan (padding-box et border-box), qui conserve border-radius, ou un masque avec mask-composite lorsque la carte doit avoir un fond transparent.
Choisissez deux ou trois couleurs, l’angle, l’épaisseur et les coins, et éventuellement la bordure tournante, réalisée avec conic-gradient et une variable d’angle enregistrée avec @property, désactivée pour les personnes qui ont demandé moins de mouvement.
Mode d’emploi
- Choisissez les couleurs et l’angle.
- Réglez l’épaisseur, les coins et le fond.
- Copiez le CSS et appliquez la classe.
Quand l’utiliser
- Carte d’une offre mise en avant.
- Photo de profil avec bordure colorée.
- Bouton d’appel principal.
Questions fréquentes
Pourquoi ne pas utiliser border-image ?
Avec border-image, le dégradé fonctionne, mais les coins arrondis (border-radius) sont ignorés. La technique de ce générateur peint le dégradé comme une seconde couche d’arrière-plan qui n’apparaît que dans la zone de la bordure, et les coins restent alors arrondis.
Et si le fond de la carte est transparent ?
Cochez l’option de fond transparent : le code utilise alors un masque (mask) pour découper l’intérieur, et ce qui se trouve derrière la carte apparaît à l’intérieur de la bordure.
Comment fonctionne la bordure tournante ?
Le dégradé est conique et l’angle est une variable enregistrée avec @property, que le CSS sait animer. Pour les personnes qui ont demandé moins de mouvement, l’animation est désactivée.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.