Générateur de border-radius

Une déclaration border-radius peut accepter jusqu’à quatre valeurs de coin indépendantes ainsi qu’une syntaxe optionnelle à huit valeurs avec barre oblique pour les courbes organiques — plus d’éléments mobiles que la plupart des gens ne le soupçonnent jusqu’à ce qu’ils aient besoin de quelque chose qui dépasse une simple carte arrondie. Ce générateur met chacun de ces éléments à l’écran : quatre curseurs de coin avec leurs propres unités px ou pourcentage, un raccourci de liaison pour les formes symétriques, et un mode Blob pour les formes qu’aucune valeur de rayon unique ne peut exprimer.

Le mode Coins couvre les formes que l’on utilise vraiment : liez tous les coins sur un seul curseur pour des cercles parfaits, des pilules et des squircles, ou déliez-les pour arrondir uniquement le haut d’un panneau déroulant ou un seul côté d’une carte. Une prévisualisation en damier derrière la forme, commutable entre un fond clair et un fond sombre, montre clairement quels coins sont rognés à chaque rayon — le même repère visuel que les outils de fichier de ce site utilisent pour afficher la transparence.

Le mode Blob est l’autre moitié : la syntaxe CSS à huit valeurs avec barre oblique permet aux rayons horizontaux et verticaux de chaque coin de diverger, ce qui transforme un rectangle arrondi en un contour organique et irrégulier. Cliquez sur Aléatoire pour obtenir une nouvelle forme à tout moment et copiez le CSS exact qui la produit — aucun export SVG ni bibliothèque externe nécessaire. Les pages de préréglages couvrent les demandes que les gens tapent vraiment dans un moteur de recherche : un cercle parfait, un bouton pilule en forme de stade, un squircle façon iOS et un blob organique prêt à l’emploi.

Comme tous les outils de ce site, il fonctionne entièrement dans votre navigateur : aucun téléversement, aucun compte, et le générateur continue de fonctionner hors ligne une fois la page chargée.