CSS Border Radius Generator
Round corners exactly how you want — from subtle cards to playful blobs.
- Your data never leaves your device
- 100% free
- No sign-up
- Works offline after first load
How to set a CSS border radius
- Set the corners — together or one by one.
- Or switch to blob mode and drag the handles.
- Copy the CSS or Tailwind class.
About Border Radius
Create CSS border-radius values visually.
Everything works in your browser, so it is instant and private. Your recent colours and settings are remembered on this device, and the address bar keeps your colour so you can share or bookmark it.
Good for
- Cards, buttons and avatars
- Organic blob backgrounds
- Speech bubbles, tabs and leaves
Tip: Percentages scale with the element; px keep the same curve at any size.
Frequently asked questions
How do I make a blob shape?
Switch to “Fancy blob shape”, drag the 4 handles along the edges (or use the sliders), or press Random blob. This uses the slash syntax: horizontal radii / vertical radii.
How do I make a circle or pill?
A circle is border-radius: 50% on a square element; a pill is a very large radius (like 999px) on a wide element. Both are presets.
What do the 4 values mean?
They go clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left.
Which unit should I use?
Pixels for fixed corners, % to scale with the element (50% turns a square into a circle), or rem to follow the font size.
Why are the corners of my image not rounded?
Put the radius on the image itself, or on its container together with overflow: hidden, so the image is clipped to the rounded corners.