CSS Border Radius Generator
Design CSS border-radius visually, from simple rounded corners to organic shapes.
Rounded corners, precisely
Border-radius rounds the corners of an element, and while a single value is simple, setting each corner independently — or creating soft organic shapes — is fiddly by hand. This lets you shape the corners visually and copies the CSS, so you get exactly the roundness you want without trial and error.
Adjust the corners and copy the border-radius CSS.
Consistency and character
Corner rounding carries more design meaning than it first appears. Sharp corners read as formal and precise, gentle rounding as friendly and modern, heavy rounding as playful — so the radius sets a tone. The key to a professional look is consistency: using the same corner radius across related elements ties a design together, while random different roundings look careless. Border-radius can also do more than rounded rectangles — setting each corner separately and using two values per corner produces soft, organic, blob-like shapes. Building it visually lets you find both a consistent everyday radius and the occasional organic shape when you want one.
Common questions
What tone does corner rounding set?
Sharp corners read as formal, gentle rounding as friendly and modern, heavy rounding as playful — so the radius carries design meaning.
How do I keep rounding looking professional?
Use a consistent radius across related elements. Random different roundings look careless, while consistency ties a design together.
Is anything uploaded?
No. It runs entirely in your browser.