⭐ 0
🔍
Texte Image PDF & Docs Audio Musique Électronique Temps Utilitaires Validateurs Ésotérisme Jeux

Générateur de forme de pilule / stade CSS

Concevez visuellement le rayon de bordure CSS : quatre curseurs de coin indépendants en px ou en pourcentage, un raccourci de lien dans tous les coins pour les cercles et les pilules instantanés, ainsi qu'un mode blob organique avec des formes aléatoires.

12px
12px
12px
12px
Traitement... 0%

Résultat

Cette page ouvre le générateur de bordure-radius avec les quatre coins liés et poussés vers un très grand rayon : 999 px. Sur un rectangle typique de la taille d'un bouton, un rayon aussi grand est coupé par le navigateur à exactement la moitié de la hauteur de la boîte, ce qui produit la forme d'une pilule ou d'un stade entièrement arrondi plutôt qu'un carré avec des coins légèrement arrondis.

C'est pourquoi les boutons de pilule n'ont pas besoin d'une valeur de rayon précise adaptée à la hauteur de chaque bouton - tout nombre confortablement supérieur à la moitié de la hauteur donne le même résultat tronqué, ce qui explique également pourquoi 999px (ou même 9999px) est devenu le raccourci communautaire informel pour « tout autour » en CSS.

Redimensionnez la boîte selon votre propre mise en page et les mêmes 999 pixels continuent de produire une pilule complète à n'importe quelle hauteur, car le navigateur se coupe toujours automatiquement à la moitié de la boîte. Copiez le CSS une fois qu'il semble correct, ou dissociez les coins pour créer une capsule asymétrique à la place.

🛡️
Exécuté dans le navigateur

Vos fichiers et entrées ne quittent jamais cet appareil. Le traitement s'effectue entièrement hors ligne. 100 % sécurisé.

Formats & règles acceptés

  • Mode Coins : curseurs de rayon indépendants en haut à gauche, en haut à droite, en bas à droite et en bas à gauche, chacun commutable entre les unités px et de pourcentage.
  • Case à cocher Lier tous les coins qui pilote chaque coin à partir d'un seul curseur, ainsi qu'un aperçu en damier sur un fond clair ou sombre afin que les coins coupés restent visibles.
  • Mode Blob avec un bouton Randomize qui crée des formes organiques de syntaxe slash à huit valeurs, affichées en grand et prêtes à être copiées au format CSS.

Avantages clés

✓ Chaque curseur met à jour instantanément l'aperçu en direct et la ligne CSS, vous n'avez donc jamais à deviner à quoi ressemble réellement 12px 40% 8px 24%.
✓ Le raccourci reliant tous les coins transforme un curseur en un cercle, une pilule ou un cercle parfait sans toucher les trois autres coins à la main.
✓ Le mode Blob génère des formes organiques et aléatoires avec la syntaxe CSS à huit valeurs – un aspect qu'une seule valeur de rayon de bordure ne pourra jamais produire.

Cas d'utilisation

  • • Composez indépendamment les quatre rayons des coins d'une carte : arrondissez uniquement le haut d'un panneau déroulant ou un seul côté d'un onglet.
  • • Reliez les quatre coins à un seul curseur pour créer un cercle parfait, un bouton de pilule en forme de stade ou un cercle de style iOS en quelques secondes.
  • • Passez en mode blob et appuyez sur Randomiser jusqu'à ce qu'une forme organique s'adapte à l'espace vide derrière une image de héros ou un avatar, puis copiez le CSS.