CSS Pill / Stadium Shape Generator
Design CSS-kantradius visuelt: fire uavhengige hjørneglidere i px eller prosent, en lenke-alle-hjørner-snarvei for øyeblikkelige sirkler og piller, pluss en organisk blob-modus med randomiserte former.
Resultat
Denne siden åpner kant-radius-generatoren med alle fire hjørner koblet og skjøvet til en veldig stor radius: 999px. På et typisk rektangel i knappstørrelse, blir en så stor radius klippet av nettleseren til nøyaktig halvparten av boksens høyde, som er det som produserer den helt avrundede pillen eller stadionformen i stedet for en firkant med lett avrundede hjørner.
Dette er grunnen til at pilleknapper ikke trenger en nøyaktig radiusverdi tilpasset hver knapps høyde – et hvilket som helst tall som er komfortabelt større enn halve høyden gir det identiske klippede resultatet, og det er også grunnen til at 999px (eller til og med 9999px) har blitt den uformelle fellesskapsstenografien for "runde dette hele veien" i CSS.
Endre størrelsen på boksen i ditt eget oppsett og de samme 999px fortsetter å produsere en full pille uansett høyde, siden nettleseren alltid klipper til halve boksen automatisk. Kopier CSS-en når den ser riktig ut, eller koble fra hjørnene for å bygge en asymmetrisk kapsel i stedet.