CSS Squircle Generator — Rundad fyrkant
Designa CSS-kantradie visuellt: fyra oberoende hörnreglage i px eller procent, en genväg för alla hörn för direkta cirklar och piller, plus ett organiskt blobläge med slumpmässiga former.
Resultat
Den här sidan öppnar generatorn för gränsradie med alla fyra hörn länkade till 30 %, en måttlig avrundning som sitter mellan en skarp fyrkant och en hel cirkel. Det är inte en sann matematisk squircle (en superellips), men det är det närmaste en enskild CSS-egenskap kan komma, och det är det värde som de flesta designsystem når när de vill ha det utseendet.
Namnet kommer från de rundade fyrkantiga appikonerna som populariserats av iOS: tillräckligt med kurvor i varje hörn för att kännas mjuka och vänliga, men aldrig så mycket att formen läses som rund. Ikonbrickor, kortminiatyrer och moderna avatarramar lutar sig alla mot radier i samma grova intervall av exakt den anledningen.
Skjut det länkade reglaget uppåt för en mjukare, mer cirkulär känsla eller nedåt för en skarpare, mer fyrkantig - CSS-raden uppdateras med varje förändring, redo att kopieras när kurvan känns rätt för din ikon eller kort.