CSS Circle Generator — 50 % kantradius
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 sammen og satt til 50 %, verdien som gjør en boks til en sirkel ved bruk av bare CSS. Ærlig talt: på en firkantet boks gir dette en perfekt sirkel, men på en rektangulær boks produserer de samme 50% i stedet en stadionlignende ellipse, siden hvert hjørne bare runder av sitt eget kvartal.
Denne forskjellen er viktig fordi 50 % kantradius er den vanligste måten å bygge sirkulære avatarer, ikonmerker og statuspunkter i CSS – langt enklere enn å klippe en sirkel med en maske eller tegne en i SVG, og den forblir skarp i alle størrelser siden det er en relativ prosentandel, ikke en fast pikselradius.
Bytt boksen til en fast firkantstørrelse i din egen CSS for å låse den perfekte sirkelen, eller la den være rektangulær med vilje for en pillelignende form - uansett, hjørnene forblir koblet sammen her slik at en enkelt glidebryter holder alle fire synkronisert mens du kopierer den resulterende CSS.