CSS Circle Generator — 50 % kantradie
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 gränsradiegeneratorn med alla fyra hörn länkade och inställda på 50 %, värdet som förvandlar en ruta till en cirkel med bara CSS. Ärligt talat: på en fyrkantig låda blir det en perfekt cirkel, men på en rektangulär låda ger samma 50% istället en stadionliknande ellips, eftersom varje hörn bara rundar av sin egen fjärdedel.
Den distinktionen är viktig eftersom 50 % gränsradie är det enskilt vanligaste sättet att bygga cirkulära avatarer, ikonmärken och statuspunkter i CSS - mycket enklare än att klippa en cirkel med en mask eller rita en i SVG, och det förblir skarpt i alla storlekar eftersom det är en relativ procentandel, inte en fast pixelradie.
Byt lådan till en fast kvadratisk storlek i din egen CSS för att låsa in den perfekta cirkeln, eller lämna den rektangulär med avsikt för en pillerliknande form - hur som helst, hörnen förblir länkade här så att ett enda reglage håller alla fyra synkroniserade medan du kopierar den resulterande CSS.