Générateur de border-radius CSS

Mode d’emploi

1. Une carte arrondie (16px) est déjà à l’écran — faites glisser le curseur Rayon ou changez l’unité (px / %) et tout se met à jour en direct, sans bouton à presser.
2. Changez de mode avec les pastilles : « Tous les coins » pilote un seul curseur, « Par coin » modifie les quatre coins indépendamment (HG, HD, BD, BG), « Elliptique » ajoute un rayon horizontal et un vertical par coin (syntaxe avec barre oblique).
3. Cliquez sur un préréglage (Net, Carte arrondie, Cercle, Gélule, Feuille, Blob) pour charger une forme prête à l’emploi — le mode et l’unité suivent automatiquement. Copiez la déclaration border-radius complète en un clic.

Portée, limites et questions courantes

• border-radius uniquement : pas de coins lissés/continus à la iOS (squircle) — ils exigent clip-path ou SVG et sortent du cadre.
• Pas de collage de valeurs CSS existantes : chaque valeur vient des curseurs, préréglages et pastilles de mode, il n’y a donc rien à mal analyser.
• Quand des rayons adjacents dépassent la longueur d’un côté, le navigateur les réduit proportionnellement. L’aperçu est le résultat réellement rendu ; la zone de code montre les valeurs que vous avez définies.
• Le préréglage Gélule produit 9999px — le raccourci courant pour « aussi rond que possible » ; le navigateur le limite à la moitié du côté le plus court.
• Les pourcentages se mesurent par axe : les rayons horizontaux par rapport à la largeur, les verticaux par rapport à la hauteur (l’aperçu est carré, les deux se lisent donc pareil ici). Sur d’autres tailles d’élément, le même pourcentage donne une autre forme.
• Rien n’est enregistré ni partagé par un paramètre dans le lien : rafraîchissez et vous revenez à la Carte arrondie par défaut. Tout s’exécute dans votre navigateur.