CSS Border Radius Generator
Adjust each corner independently with live sliders on a preview box to design anything from subtly rounded corners to organic, asymmetric blob shapes, then copy the exact border-radius CSS value.
Design & CSS Tools Runs entirely in your browser
All processing happens on your device — nothing is sent to a server.
CSS code
border-radius: 16px;
What this tool does
Sets an element's corner rounding, each corner individually or all together, with a preview and CSS.
When to use it
- A card or button needing a specific corner rounding.
- An asymmetric shape such as a speech bubble.
- Standardising corner rounding across a design system.
- Trying rounding values before committing to one.
How to use it
- Set "Top left", "Top right", "Bottom right" and "Bottom left".
- Watch the preview.
- Copy the CSS.
A practical example
Input
A large radius on three corners and zero on the fourth.
Output
A speech-bubble shape, with ready CSS.
Limitations
- A radius larger than half the element's smallest dimension turns it into an ellipse or a circle.
- Rounding an element that has a border or shadow affects those too.
- This generates the rounding and does not address clipping the content inside the element.
Privacy and processing
The rounding is computed on your device and nothing leaves it.
Technical notes
- Setting each corner individually is what enables the asymmetric shapes that are awkward to write by hand in the correct order.