Générateur CSS border-radius
Créez le raccourci border-radius à partir des valeurs par coin, avec coins elliptiques et équivalent Tailwind.
Générateur CSS border-radius
Définissez un rayon pour chaque coin et cet outil assemble le CSS border-radius correct, réduit au raccourci valide le plus court : une valeur quand les quatre coins correspondent, deux ou trois quand les coins opposés se répètent, et la liste complète de quatre valeurs quand chaque coin est différent. Il est conçu pour quiconque façonne des cartes, des boutons, des avatars, des modales ou des champs de saisie qui veut du CSS propre et copiable sans faire les maths de coin à la main.
Choisissez « Identique pour tous les coins » pour un simple rectangle arrondi, ou basculez vers « Coins séparés » pour régler chaque coin indépendamment en px, pourcentage ou rem. Activer les coins elliptiques ajoute la notation de barre à huit valeurs que border-radius supporte : un rayon horizontal et un rayon vertical distinct par coin, contrôlés par un curseur de rapport unique pour qu'une squircle ou une forme de pillule aplatie nécessite une glissade au lieu de huit champs. L'option « Goutte organique aléatoire » génère une nouvelle forme asymétrique à chaque exécution, le type de contour doux et irrégulier utilisé derrière les images hero et les gouttes décoratives. Basculez la sortie entre le raccourci border-radius et les quatre propriétés border-*-radius développées, et activez l'option Tailwind pour obtenir la classe utilitaire à valeur arbitraire correspondante aux côtés du CSS simple.
Les valeurs sont validées au fur et à mesure que vous tapez : les nombres négatifs sont traités comme zéro et il n'y a aucun état qui produit du CSS cassé. Le décompte en direct sous la sortie indique combien de lignes de déclaration ont été générées, combien de valeurs de coin distinctes ont été comprimées dans le raccourci, et le nombre exact de caractères, mis à jour à mesure que vous ajustez n'importe quelle option.
Tout s'exécute localement dans votre navigateur : aucune valeur de coin ou CSS généré n'est jamais envoyé n'importe où. Copiez le résultat, téléchargez-le en tant que fichier .txt, ou envoyez-le directement à l'entrée d'un autre outil pour continuer à travailler dessus.