Border Radius Generator
Round the corners of a box with one shared value or four individual corners, preview it live, and copy the border-radius CSS.
- Free
- No sign-up
- Runs in your browser
Everything runs locally in your browser.
How to use Border Radius Generator
- Drag the slider for uniform corners, or untick “same for all corners” to set each corner separately.
- Watch the preview shape update live.
- Copy the CSS border-radius rule.
About this tool
Rounded corners soften the look of cards, images and buttons. When all four corners differ, the CSS shorthand order (top-left, top-right, bottom-right, bottom-left) is easy to mix up — the generator shows the shape and writes the rule for you.
When to use it: softening cards, images and buttons to match a modern design.
Frequently asked questions
Can I make a circle?
Yes — set the radius to 50% of the box (or a large pixel value) and a square preview becomes a circle.
What radius feels modern for cards?
8–16 pixels is the common range for cards and buttons; large 24+ values suit hero panels and playful designs.
Can I round only the top corners?
Yes — untick “same for all corners” and set the bottom corners to 0; the copied shorthand keeps the order top-left, top-right, bottom-right, bottom-left.
Does border-radius affect the background image too?
Yes — the element’s background and border are clipped to the rounded shape, which is why it is perfect for circular avatars.
Is it supported everywhere?
Yes, border-radius is universally supported in all modern browsers, including mobile.
Related tools
How to use Border Radius Generator
Upload your image to the Border Radius Generator canvas by dragging or clicking. Configure settings such as quality, dimensions, or filter options as needed, then start processing. The output renders in the same tab and can be saved directly.
Practical benefits
- Complete tasks faster without installing additional software.
- Keep files private since processing happens in your browser.
- Produce consistent results that integrate into your workflow.
Frequently asked questions
Is this tool free to use?
Yes. Border Radius Generator is fully free with no account or subscription required.
Does it upload my files?
No. All processing occurs locally within your browser session.
Can I use this for professional projects?
Yes, the tool is designed for both casual and professional use. Always verify critical outputs.