CSS Border Radius Generator
Create rounded corners and custom CSS shapes with a live preview. Adjust each corner independently 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.
Related tools
- CSS gradient generator — Create linear, radial, and conic gradients with a live preview.
- CSS box shadow generator — Create layered box shadows with sliders and presets.
Last updated: