⬜ Border Radius Generator
Generate CSS border-radius with visual preview. Create rounded corners or elliptical shapes — all in your browser, instant results.
About the Border Radius Generator
This border radius generator runs entirely in your browser. Adjust the horizontal and vertical radii for each of the four corners independently, or enable elliptical mode for more complex shapes. Copy the generated CSS code directly into your project.
How border-radius works
- Simple rounded corners — When elliptical mode is off, each corner uses a single value. The CSS uses 4 values: top-left, top-right, bottom-right, bottom-left.
- Elliptical corners — When enabled, each corner has separate X and Y radii, creating elliptical curves. The CSS uses the 4/4 format with a slash separator.
- Per-corner control — All 8 sliders let you set different radii for each corner in both directions.
How to use the generator
- Adjust the 8 sliders to set the X and Y radii for each corner.
- Toggle elliptical corners on for separate X/Y control in the CSS output.
- Watch the preview box update in real time.
- Click Copy CSS to copy the generated code.
Frequently asked questions
What's the difference between simple and elliptical? Simple uses one value per corner (circular arc). Elliptical uses separate X and Y values per corner, allowing oval-shaped curves.
Can I create a circle? Yes — set all values to 50% (or half the box size in px) for a perfect circle or ellipse.
Is border-radius supported everywhere? Yes, border-radius is supported in all modern browsers including mobile.