Générateur de Border Radius

Un rayon en pixels est fixe : border-radius: 16px arrondit chaque coin d'exactement 16 pixels, quelle que soit la taille de l'élément. Un rayon en pourcentage est relatif — il est calculé par rapport à la largeur et à la hauteur propres de l'élément, donc les coins évoluent à mesure que la boîte grandit ou rétrécit. Cette différence change la forme obtenue. Un pourcentage proche de 50% courbe les coins au point qu'ils se rejoignent, transformant un carré en cercle ou un rectangle en ellipse, ce qui explique pourquoi les avatars et boutons ronds utilisent 50% plutôt qu'une valeur fixe en pixels. Les pixels conservent une douceur constante et prévisible sur des cartes et champs de tailles différentes ; les pourcentages créent des formes fluides qui s'adaptent. Ce générateur permet de changer d'unité selon le design (px jusqu'à 200, % jusqu'à 50) et affiche le résultat en direct, pour voir exactement le comportement voulu avant de copier le code.

Pour un cercle, appliquez border-radius: 50% à un élément aux côtés égaux (carré). Le pourcentage arrondit chaque coin par rapport à la boîte, et à 50% les quatre arcs se rejoignent pour former un cercle complet — c'est la technique standard pour les avatars ronds et les boutons d'icônes. Pour une pilule, l'astuce est différente : appliquez une valeur en pixels très élevée, comme 9999px, à un élément plus large que haut. Le rayon est plafonné à la moitié du côté le plus court, donc les deux extrémités deviennent des demi-cercles totalement arrondis tandis que le milieu reste droit, donnant le classique aspect tag ou bouton bascule. Garder l'élément carré produit à nouveau un cercle. Cet outil propose des préréglages Cercle et Pilule prêts à l'emploi, plus un aperçu en direct, pour confirmer que la forme tient bien à la taille réelle de votre élément avant de coller le code.

Le border-radius standard donne une seule valeur d'arrondi par coin. La forme à huit valeurs divise chaque coin en un rayon horizontal et un rayon vertical, séparés par une barre oblique : les valeurs avant la barre définissent les rayons horizontaux, celles après définissent les rayons verticaux. Quand le rayon horizontal et le rayon vertical d'un coin diffèrent, l'arc devient une courbe asymétrique, en forme d'œuf, plutôt qu'un quart de cercle net. En combinant quatre coins désaccordés, le contour devient souple et irrégulier — la forme organique en « blob », squircle ou galet, populaire dans les arrière-plans d'interfaces modernes et les éléments décoratifs. Ces formes sont presque impossibles à régler à la main puisque huit chiffres interagissent en même temps. Ce générateur expose les huit valeurs, propose des préréglages organiques comme squircle, galet et vague construits sur cette syntaxe, et affiche le résultat en direct pour ajuster un seul rayon et voir la silhouette changer instantanément.

Quand les quatre coins partagent la même valeur en pixels, le générateur vérifie si cette valeur correspond à l'échelle de rayons par défaut de Tailwind. Si c'est le cas, vous obtenez la classe utilitaire intégrée — par exemple un petit rayon correspond à rounded-md, et une très grande valeur correspond à rounded-full pour les cercles et les pilules. Quand la valeur ne correspond à aucun palier prédéfini, l'outil bascule sur la syntaxe de valeur arbitraire de Tailwind, produisant une classe comme rounded-[18px] qui intègre le chiffre exact. Les coins mixtes sont traités de la même façon, associés aux utilitaires par coin appropriés ou à des valeurs arbitraires. Cela évite de mémoriser l'échelle ou de deviner quelle classe nommée correspond à quelle valeur en pixels. En plus de Tailwind, vous pouvez copier du CSS brut, un template styled-components, ou des variables CSS personnalisées — choisissez le format utilisé par votre projet et collez-le directement.

em et rem sont des unités relatives à la police, pas des unités absolues. Un rem équivaut à la taille de police racine, et un em équivaut à la taille de police de l'élément courant ; dans une configuration classique, les deux valent 16 pixels. Ainsi, border-radius: 1rem donne un rayon d'environ 16px, et 2rem environ 32px — bien plus arrondi que border-radius: 2px. L'avantage, c'est l'évolutivité : si un utilisateur ou votre design system augmente la taille de police de base, les rayons définis en em ou rem grandissent proportionnellement et restent visuellement équilibrés avec le texte, tandis que les rayons en pixels restent figés. Utilisez rem quand vous voulez que les coins suivent l'échelle typographique de tout un thème, et em quand vous voulez les lier à la taille de police d'un seul composant. Ce générateur calcule em et rem par rapport à une base de 16px dans l'aperçu, afin que l'arrondi affiché corresponde à ce qui sera livré, et vous pouvez changer d'unité à tout moment pour comparer.