Generateur CSS Border Radius - Arrondisseur de Coins

A Ce générateur produit des propriétés CSS standard, pas des propriétés personnalisées comme `--radius: 20px`. Vous devez intégrer manuellement la sortie dans un appel `var()` dans votre feuille de style. Collez le code, remplacez la valeur par `var(--mon-rayon)`. L'outil est conçu pour des ajustements visuels rapides — pour les variables CSS, recopiez les valeurs vous-même. Comptez 30 secondes.

A Les coins arrondis utilisent l'accélération GPU dans les navigateurs récents, donc ils sont plus rapides que les ombres ou dégradés complexes. Mais empiler des dizaines d'éléments avec border-radius sur un vieux téléphone vide la batterie. Des freelances mettent 50+ cartes arrondies sur une seule page — c'est là que ça rame. Limite-toi à 30 éléments avec des rayons sous 20px pour les Android d'entrée de gamme. Teste sur un Moto G de 2019 pour être tranquille.

A Non, aucun raccourci clavier pour ça. Il faut cliquer sur le bouton de réinitialisation ou remettre chaque coin à zéro manuellement. J’ai vu des freelances perdre dix minutes à ajuster des coins qu’ils voulaient réinitialiser — cliquez sur l’icône en haut à droite. Elle efface tous les champs d’un coup.

A Seulement si l'élément est un carré parfait avec tous les coins à 50%. Sur une boîte de 200x200px, border-radius: 50% donne un cercle exact. Mais sur un rectangle de 300x200px, 50% produit un ovale — les rayons horizontal et vertical diffèrent. Le générateur l'affiche en direct : fais glisser un curseur sur un rectangle. Tu verras la forme devenir une pilule quand les quatre coins atteignent 50%. Ce n'est pas un bug, c'est le calcul CSS normal.

A C'est exactement à ça que sert le bouton de déverrouillage. Cliquez dessus pour séparer les quatre coins, puis réglez en haut à gauche et en bas à droite sur le rayon souhaité tout en gardant les deux autres à 0. Pour un effet feuille sur un bouton de 120px de large, essayez 60px sur ces coins diagonaux. Vous obtiendrez un contour en goutte tout en douceur. L'aperçu se met à jour instantanément, donc ajustez les curseurs jusqu'à ce que la forme paraisse naturelle. Si vous êtes perdu, l'icône de réinitialisation remet tout à zéro.

A Les anciennes versions de Firefox avaient un bug d'arrondi des sous-pixels, rendant les courbes crénelées sous 4px de rayon. Chrome lisse ces mêmes valeurs. Votre code généré n'est pas faux — le moteur de rendu diffère. Essayez un rayon d'au moins 6px pour masquer l'écart, et ajoutez `-moz-border-radius` uniquement si vous devez supporter Firefox ESR 102. Pour les navigateurs récents, la propriété standard gère tout. Je teste toujours ma sortie dans les deux navigateurs avant de livrer un projet client.

A Pas du tout. Mélangez pourcentages, pixels et coins dissociés pour créer des formes organiques. Un élément de 100px avec coin haut gauche à 100%, haut droit à 20px et les deux bas à 0 donne une sorte de goutte asymétrique. Exportez le code et ajoutez clip-path pour les courbes concaves. Les presets du générateur restent le meilleur point de départ, surtout pour tester des combinaisons. La largeur de la bordure influence aussi beaucoup le rendu final.

A Oui, vous pouvez animer les modifications de border-radius au survol des boutons. Ajoutez une durée de transition de 0,3s ease au code CSS généré. Lorsque l'utilisateur survole l'élément, les coins passent sans accroc du carré au rond. Assurez-vous simplement que les unités de début et de fin correspondent. Mélanger des pixels et des pourcentages provoque des sauts visuels.

A Ce générateur style uniquement le conteneur, donc les photos vont dépasser à moins d'ajouter overflow hidden. J'ai fait l'erreur sur un site client le mois dernier. Écris `overflow: hidden` juste sous ton code de bordure dans la feuille de style. Cela force l'image à respecter la courbe sans dépasser des coins. Teste avec une photo pour voir le résultat instantanément.