CSS-cirkelgenerator — 50% Border Radius
Ontwerp CSS border-radius visueel: vier onafhankelijke hoeksliders in px of procenten, een 'alle hoeken koppelen'-shortcut voor direct cirkels en pillen, plus een organische blob-modus met willekeurige vormen.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de border-radius-generator met alle vier de hoeken gekoppeld en ingesteld op 50%, de waarde die van een box een cirkel maakt met alleen CSS. Eerlijk is eerlijk: bij een vierkante box geeft dit een perfecte cirkel, maar bij een rechthoekige box produceert dezelfde 50% een stadionachtige ellips, omdat elke hoek alleen zijn eigen kwart afrondt.
Dat onderscheid is belangrijk, want 50% border-radius is de meest gebruikte manier om ronde avatars, icoonbadges en statusdots in CSS te maken — veel eenvoudiger dan een cirkel uitknippen met een masker of er een tekenen in SVG, en het blijft scherp op elk formaat omdat het een relatief percentage is, geen vaste pixelradius.
Zet de box in je eigen CSS op een vast vierkant formaat om de perfecte cirkel te behouden, of laat hem bewust rechthoekig voor een pilachtige vorm — hoe dan ook, de hoeken blijven hier gekoppeld zodat één slider ze alle vier synchroon houdt terwijl je de resulterende CSS kopieert.