Image & Design
Border Radius Generator
Border Radius Generator lets you adjust the roundness of each corner of a box independently on a live preview, then copy the exact CSS border-radius value needed to recreate it. It's useful for developers crafting custom shapes, blob-style buttons, or asymmetrical card designs.
The preview is rendered with live CSS right in your browser as you make adjustments, so there's no server processing — what you see while designing is exactly what you'll get in your code.
How to Use the Border Radius Generator
- Open the Border Radius Generator tool.
- Adjust each corner's radius individually on the preview box.
- Watch the shape update live as you make changes.
- Copy the generated border-radius CSS code.
Frequently Asked Questions
Can each corner have a different radius value?
Yes, the tool lets you set each of the four corners independently, which is how you create asymmetrical or blob-like shapes.
Does border-radius work on any HTML element?
Border-radius can be applied to most block-level elements like divs, buttons, and images to round their corners.
Will the generated CSS work in all modern browsers?
Yes, border-radius is a well-established CSS property supported by all current major browsers without vendor prefixes.