CSS Squircle Generator — afrundet firkant
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 med 30 %, en moderat afrunding, der sidder mellem en skarp firkant og en hel cirkel. Det er ikke et sandt matematisk squircle (en superellipse), men det er det tætteste en enkelt CSS-egenskab kan komme, og det er den værdi, de fleste designsystemer når efter, når de vil have det look.
Navnet kommer fra de afrundede firkantede app-ikoner, der er blevet populært af iOS: nok kurve på hvert hjørne til at føles blødt og venligt, men aldrig så meget, at formen lyder som rund. Ikonbrikker, kortminiaturebilleder og moderne avatarrammer læner sig alle op af radier i det samme grove område af netop den grund.
Skub den sammenkædede skyder op for at få en blødere, mere cirkulær følelse eller ned for en skarpere, mere firkantet - CSS-linjen opdateres med hver ændring, klar til at kopiere, når kurven føles rigtig for dit ikon eller kort.