À propos de cet outil
Les coins arrondis donnent le ton d’une interface, et border-radius peut faire bien plus qu’une seule valeur uniforme. Ce générateur vous laisse arrondir chaque coin indépendamment et utiliser la syntaxe complète à huit valeurs horizontal/vertical pour créer des formes « blob » douces et organiques qui ne ressemblent en rien à un simple rectangle.
Faites glisser les curseurs, regardez la forme se mettre à jour en direct et copiez le CSS border-radius. Tout tourne dans votre navigateur.
Questions fréquentes
Quelle est la différence entre le mode lié et le mode par coin ?
Le mode lié applique un même rayon en pixels aux quatre coins ; en le décochant, on passe au mode par coin, où vous définissez un pourcentage horizontal et vertical indépendant pour chaque coin.
Puis-je créer des coins elliptiques (non circulaires) ?
Oui. Passez en mode par coin et définissez des pourcentages horizontal et vertical différents — le border-radius CSS prend en charge deux rayons par coin, et cet outil expose les deux.
Comment obtenir un cercle parfait ou une forme de pilule ?
Pour un cercle, réglez le rayon uniforme à 50% de la largeur/hauteur de l'élément (ou utilisez le mode par coin à 50%/50%) ; pour une forme de pilule, réglez le rayon à au moins la moitié de la hauteur de l'élément.
Ma conception est-elle envoyée quelque part ?
Non. La boîte d'aperçu et le CSS généré sont calculés uniquement en local, dans votre navigateur.
Pourquoi le résultat comporte-t-il parfois une barre oblique (/) dans le CSS ?
La barre oblique sépare les rayons horizontal et vertical (`border-radius: h1 h2 h3 h4 / v1 v2 v3 v4`) — cela n'apparaît qu'en mode par coin, le mode lié n'ayant besoin que d'une seule valeur.