CSS border-radius generator
Create CSS rounded corners (border-radius) with a live preview and copy-ready code.
🔒 100% client-side — no data sent
CSS border-radius generator to create rounded corners with a live preview and copy-ready code. Adjust each corner independently or all at once, then grab the exact CSS property. Everything runs in your browser: no data or image is ever sent to a server.
FAQ
How do I round a single corner in CSS?
Use a specific property such as border-top-left-radius: 12px; to round just one angle. The tool lets you set each corner separately and generates the matching line.
How do I make a circle or oval with border-radius?
Apply border-radius: 50% to a square element for a perfect circle, or to a rectangle for an ellipse. Select the % unit in the tool to achieve this.
What's the difference between px, % and em for border-radius?
Pixels give a fixed radius, percentages are relative to the element's size (ideal for circles), and em depends on font size. You can test each unit in the preview.
Does the generated code work in all browsers?
Yes, border-radius is supported by all modern browsers without any prefix. Just copy the property into your stylesheet.