Générateur de border-radius CSS
Créez visuellement des border-radius CSS avec aperçu en direct et copiez un code prêt pour la production.
border-radius: —;
100 % privé — tout s'exécute dans votre navigateur. Rien n'est envoyé.
À propos de Générateur de border-radius CSS
Le générateur de Border Radius CSS crée tout, des cartes légèrement arrondies aux formes organiques en blob. Faites glisser les poignées de coin directement sur l'aperçu, ou définissez chaque coin numériquement — y compris la syntaxe complète à huit valeurs, où chaque coin a des rayons horizontal et vertical distincts. C'est ce second axe qui permet de créer des œufs, feuilles, gouttes et blobs.
Un interrupteur de liaison des coins garde les quatre coins synchronisés pour un arrondi uniforme classique, tandis que le déliage libère chaque coin pour des formes asymétriques. Douze préréglages — arrondi, pilule, cercle, squircle, deux blobs, feuille, œuf, arche, goutte, pétale et vague — montrent ce que la propriété peut faire, et un bouton aléatoire génère sans fin de nouvelles formes organiques.
Vous pouvez changer l'unité, recolorer l'élément et le fond pour correspondre à votre design, et copier soit la valeur border-radius brute, soit une règle CSS complète. L'outil est 100 % côté client — rien n'est téléversé.
Comment utiliser Générateur de border-radius CSS
- Faites glisser les poignées de coin sur l'aperçu, ou désactivez « Lier tous les coins » pour modifier chaque coin séparément.
- Réglez le rayon horizontal et vertical par coin pour des formes organiques en blob.
- Choisissez votre unité et ajustez les couleurs de l'élément et de l'arrière-plan pour prévisualiser en contexte.
- Essayez les préréglages — pilule, squircle, blob, feuille, goutte et plus — ou cliquez sur aléatoire.
- Copiez la valeur border-radius ou le CSS complet.