CSS-cirkelgenerator — 50% randradius
Ontwerp de CSS-randradius visueel: vier onafhankelijke hoekschuifregelaars in px of procent, een snelkoppeling naar alle hoeken voor directe cirkels en pillen, plus een organische blob-modus met willekeurige vormen.
Resultaat
Deze pagina opent de grensradiusgenerator met alle vier de hoeken gekoppeld en ingesteld op 50%, de waarde die een kader in een cirkel verandert met alleen CSS. Eerlijk gezegd: op een vierkante doos is dit een perfecte cirkel, maar op een rechthoekige doos levert dezelfde 50% daarentegen een stadionachtige ellips op, aangezien elke hoek altijd maar zijn eigen kwart afrondt.
Dat onderscheid is van belang omdat een randradius van 50% de meest gebruikelijke manier is om cirkelvormige avatars, pictogrambadges en statuspunten in CSS te bouwen – veel eenvoudiger dan een cirkel uitknippen met een masker of er een te tekenen in SVG, en het blijft scherp op elke grootte omdat het een relatief percentage is, geen vaste pixelradius.
Verander het vak naar een vast vierkant formaat in je eigen CSS om de perfecte cirkel vast te leggen, of laat het expres rechthoekig voor een pilachtige vorm. Hoe dan ook, de hoeken blijven hier gekoppeld, zodat een enkele schuifregelaar alle vier gesynchroniseerd houdt terwijl je de resulterende CSS kopieert.