CSS Pill / Stadium Shape Generator
Design CSS-kantradius visuelt: fire uafhængige hjørneskydere i px eller procent, en genvej til alle hjørner til instant cirkler og piller, plus en organisk blob-tilstand med randomiserede former.
Resultat
Denne side åbner kant-radius-generatoren med alle fire hjørner forbundet og skubbet til en meget stor radius: 999px. På et typisk rektangel i knapstørrelse bliver en så stor radius af browseren klippet til præcis halvdelen af boksens højde, hvilket er det, der producerer den fuldt afrundede pille eller stadionform snarere end en firkant med let afrundede hjørner.
Dette er grunden til, at pilleknapper ikke behøver en præcis radiusværdi, der er indstillet til hver knaps højde - ethvert tal, der er komfortabelt større end halvdelen af højden, giver det identiske klippede resultat, hvilket også er grunden til, at 999px (eller endda 9999px) er blevet den uformelle fællesskabsstenografi for 'runding af dette hele vejen' i CSS.
Ændr størrelsen på boksen i dit eget layout, og de samme 999px bliver ved med at producere en fuld pille i enhver højde, da browseren altid klipper til halvdelen af boksen automatisk. Kopier CSS'en, når den ser rigtig ud, eller fjern forbindelsen mellem hjørnerne for at bygge en asymmetrisk kapsel i stedet.