Hoe maak ik een cirkel?

Gebruik border-radius: 50% op een element met gelijke breedte en hoogte. Bij een rechthoek geeft 50% een ellips, terwijl een grote pixelwaarde een pil met rechte zijden oplevert.

Wat betekent de schuine streep in border-radius?

Die scheidt horizontale van verticale radiussen, zodat elke hoek een kwart ellips kan zijn in plaats van een kwart cirkel. Organische blobvormen gebruiken deze notatie.

Generator voor afgeronde hoeken

Rond elke hoek af, schakel over naar elliptische radiussen en versleep randgrepen om blobvormen te boetseren. Kopieer border-radius-CSS of Tailwind.

Livevoorbeeld

Schakel over naar % om de vorm met randgrepen te boetseren.

border-radius: 24px;

Alles blijft in je browser.

Referenties

MDN — border-radius

Pagina bijgewerkt: 2026-10-25

Livevoorbeeld

Handleiding en voorbeeld

Gerelateerde tools

Referenties