CSS Border Radius Generator
Adjust per-corner or elliptical (8-value) border-radius with sliders and handles, preview live, and copy the generated CSS code.
How to Use
Shape the corners
Drag the handles around the preview, or move the per-corner sliders to shape the rounded corners.
Use a preset
Apply circle, leaf, blob and more with one tap, then fine-tune from there.
Copy the CSS
Hit "Copy CSS" to grab the generated border-radius code and paste it straight into your stylesheet.
About the Border Radius Generator
A visual generator for the CSS border-radius property. Set each corner individually, or create elliptical corners with different horizontal and vertical radii using the 8-value slash syntax. Everything runs in your browser and nothing is sent to any server.
Features
- Live PreviewEvery handle and slider change is reflected instantly so you can shape it visually.
- Elliptical (8 values)Outputs accurate slash-syntax for corners with different horizontal and vertical radii.
- Shape PresetsRecall common shapes like circle, leaf, blob and squircle with a single tap.
- px / % ToggleOutput relative percentages or absolute pixels computed from the preview size.
Use Cases
- Rounded buttons, cards and input fields
- Clip avatar images into perfect circles
- Organic decorative shapes like leaves and blobs
- Ticket-style and pill-shaped UI components
- Turning design mockups into CSS
FAQ
Is the border radius generator free to use?
What is the 8-value slash syntax for elliptical corners?
Should I use % or px?
Is my data sent to a server?
Does it work on smartphones?
Which browsers support the generated CSS?
Feedback
Missing a feature, or getting a result that looks wrong? Let us know — we improve our tools based on your feedback.