Générateur de forme CSS pilule / stade
Concevez visuellement vos border-radius CSS : quatre curseurs indépendants par coin en px ou en pourcentage, un raccourci de liaison pour des cercles et des pilules instantanés, ainsi qu’un mode Blob organique avec des formes aléatoires.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur de border-radius avec les quatre coins liés et poussés à un très grand rayon : 999px. Sur un rectangle de taille typique pour un bouton, un rayon aussi grand est écrêté par le navigateur exactement à la moitié de la hauteur de la boîte, ce qui produit la forme de pilule ou de stade entièrement arrondie plutôt qu’un carré aux coins légèrement adoucis.
C’est pourquoi les boutons en forme de pilule n’ont pas besoin d’un rayon précis adapté à leur hauteur — toute valeur confortablement supérieure à la moitié de la hauteur donne le même résultat écrêté, ce qui explique aussi pourquoi 999px (voire 9999px) est devenu le raccourci officieux de la communauté CSS pour « arrondir à fond ».
Redimensionnez la boîte dans votre mise en page et le même 999px continuera de produire une pilule complète quelle que soit la hauteur, car le navigateur écrête toujours à la moitié de la boîte automatiquement. Copiez le CSS dès que le résultat vous convient, ou déliez les coins pour créer une capsule asymétrique.