Générateur de Border Radius

Façonnez les coins avec plus de contrôle

Le rayon de bordure est l'un des moyens les plus rapides de modifier la personnalité d'une interface. Les petites valeurs donnent un rendu précis et structuré, les valeurs moyennes rendent cartes et boutons plus accueillants, et les grandes valeurs permettent de créer des pilules, des formes organiques ou des panneaux d'illustration ludiques. Ce générateur de border radius expose toute la syntaxe CSS afin que vous puissiez concevoir aussi bien des rectangles arrondis classiques que des coins elliptiques, sans écrire à la main la notation avec barre oblique.

Chaque coin possède un rayon horizontal et un rayon vertical. Lorsque les valeurs sont identiques, le coin est circulaire et le CSS ressemble à la déclaration border-radius à quatre valeurs bien connue. Lorsque X et Y diffèrent, le coin devient elliptique et le CSS écrit d'abord les valeurs horizontales, puis une barre oblique, puis les valeurs verticales. L'aperçu en direct rend cette relation évidente, car la forme change immédiatement à mesure que vous déplacez chaque curseur.

Quand les rayons elliptiques sont utiles

Les coins elliptiques sont utiles lorsque vous voulez quelque chose de plus organique qu'une simple carte tout en conservant un CSS léger et adaptatif. Ils peuvent rendre les avatars, les encadrés de mise en avant, les formes de coupon, les masques d'image et les panneaux décoratifs moins génériques. Les coins asymétriques aident aussi à créer une direction visuelle qui attire l'attention vers un titre ou un appel à l'action. Utilisez le préréglage blob comme point de départ, puis réduisez les valeurs les plus fortes si la forme commence à distraire du contenu.

Utiliser les valeurs de rayon de façon cohérente

Dans les design systems en production, conservez un petit jeu de rayons standard pour les composants courants et n'utilisez des valeurs personnalisées que lorsque la forme a un objectif clair. Un bouton, un champ de saisie et une carte paraissent généralement plus cohérents lorsqu'ils partagent des tailles de coins apparentées. Les sections décoratives peuvent être plus expressives, mais elles doivent rester harmonieuses à différentes largeurs. Après avoir copié le CSS généré, testez-le sur la taille réelle de l'élément : un rayon équilibré sur la carte d'aperçu peut sembler trop marqué sur un petit badge ou trop discret sur un large bandeau hero.