CSS Border Radius Generator
Create rounded corners and custom CSS shapes with this free interactive CSS border radius generator. Adjust each corner independently, preview the changes instantly, and copy the generated CSS into your stylesheet.
Corner settings
Presets
What is CSS border-radius?
The CSS border-radius property rounds the corners of an element. You can apply the same radius to all four corners or set a different radius for each one.
/* Same radius on all corners */
border-radius: 12px;
/* Top-left, top-right, bottom-right, bottom-left */
border-radius: 8px 16px 24px 32px;
How to round each corner differently
Set each corner separately using four values in clockwise order: top-left, top-right, bottom-right, and bottom-left. The generator provides a slider for each corner. Enable Link corners to change all four together.
How do elliptical corners work?
CSS also supports separate horizontal and vertical corner radius values. A slash (/) separates them, allowing asymmetric and organic shapes:
border-radius: 30% 70% 65% 35% / 40% 30% 70% 60%;
Enable elliptical corners in the generator to adjust the horizontal and vertical curves separately.
Pixels vs percentages
- Pixels (
px) give a fixed radius and work well for buttons, cards, and panels. - Percentages (
%) scale relative to the element's width (horizontal corner values) and height (vertical corner radius values). They are useful for circles, ovals, and organic shapes.
Frequently asked questions
How do I make a circle with CSS?
Use border-radius: 50% on an element with equal width and height. On a rectangular element, this produces an oval.
Can I round only one corner?
Yes. Set the other corners to zero, for example: border-radius: 20px 0 0 0; rounds only the top-left corner.
Does border-radius work without a border?
Yes. It rounds the element's background and border edge even if you have not added a visible border.
Is CSS border-radius supported by modern browsers?
Yes. Modern browsers support the standard border-radius property, including elliptical corners, without vendor prefixes.
Last updated: