Generateur CSS Border Radius - Arrondisseur de Coins

A Lorsque vous définissez une valeur `border-radius` dépassant la moitié du côté le plus court d'un élément, la courbe visuelle réelle plafonnera à 50 % de ce côté. Le navigateur limite automatiquement le rayon pour éviter les courbes qui se chevauchent ou les formes déformées. Par exemple, sur un carré de 100x100px, définir `border-radius: 200px;` donnera toujours un cercle parfait, comme si vous aviez défini `50px` ou `50%`, empêchant efficacement un rayon trop grand.

A Cliquer sur le bouton 'détacher' déconnecte les commandes de coin individuelles. Cela signifie que vous pouvez ajuster le rayon d'un coin sans affecter les autres. Vous verrez les quatre champs de saisie devenir indépendants. C'est pratique pour créer des designs asymétriques.

A Oui, vous pouvez basculer entre pixels et pourcentages dans le générateur. Les pourcentages sont relatifs aux dimensions de l'élément, pas au rayon lui-même. Une valeur de 50% sur une boîte de 200px de large crée un rayon de 100px aux coins. C'est crucial pour les mises en page responsives où la taille des éléments change. Préférez les pourcentages quand votre design doit s'adapter à différents écrans.

A Si vous avez utilisé des pixels, le rayon reste fixe quelle que soit la taille d'écran. Sur un téléphone, un rayon de 40px paraît énorme par rapport au bureau. Passez aux pourcentages — ils s'adaptent à l'élément. Par exemple, 10% reste proportionnel, que votre bouton fasse 150px ou 300px de large. Testez d'abord votre design dans l'aperçu responsive du générateur.

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.