CSS border radius generator
Round each corner separately, make elliptical corners, and copy the shortest CSS. The preview is a real box with your CSS applied.
Free · Runs in your browser · Updated 26 September 2026
CSS border radius generator
Corners
Preview and CSS
CSS
border-radius: 24px;border-radius: 24px;
The syntax
One to four values, then an optional slash.
| Values | Corners they set |
|---|---|
10px | All four corners. |
10px 20px | Top-left and bottom-right are 10px; top-right and bottom-left are 20px. |
10px 20px 30px | Top-left 10px; top-right and bottom-left 20px; bottom-right 30px. |
10px 20px 30px 40px | Top-left, top-right, bottom-right, bottom-left, clockwise. |
10px 20px / 30px 40px | The slash separates the horizontal radii from the vertical ones, which makes elliptical corners. Each side follows the same one-to-four rule. |
The generator always writes the shortest form: if all four corners match it writes one value, and it drops the slash when the vertical radii equal the horizontal ones.
Recipes
Shapes people ask for.
| Shape | CSS | Notes |
|---|---|---|
| Circle | border-radius: 50% | On an element with equal width and height. |
| Pill or capsule | border-radius: 9999px | On any rectangle. The radius is capped at half the shorter side. |
| Rounded top only | border-radius: 16px 16px 0 0 | Cards with a header image. |
| Speech bubble | border-radius: 20px 20px 20px 0 | A square corner where the tail attaches. |
| Soft blob | border-radius: 60% 40% 30% 70% / 60% 30% 70% 40% | Elliptical corners in percentages. |
- Very large radii on small elements are clipped by the rule above, so a value that looks huge is still safe.
- The corner curve does not clip children. Add overflow: hidden if content inside must follow it.
FAQ
Questions people ask first.
- What order are the four border-radius values in?
- Clockwise from the top left: top-left, top-right, bottom-right, bottom-left. With fewer values CSS fills in the rest: two values apply to opposite corners in pairs, and three values leave the top-right and bottom-left the same.
- How do I make a circle?
- Give the element equal width and height and set border-radius: 50%. On a rectangle, 50% gives an ellipse.
- Why does a bigger radius stop changing anything?
- If two neighbouring radii add up to more than the side they share, the browser scales all the radii down by the same factor so the curves do not overlap. That is also why a huge value such as 9999px makes fully rounded ends on any rectangle.
- Should I use px, % or rem?
- Pixels stay the same size whatever the box does. Percentages scale with the box: the horizontal radius is a percentage of the width and the vertical one of the height. rem scales with the root font size, which suits designs that grow with text size.
- Does border-radius round the content inside the box?
- It rounds the box’s background and border. Children that stick out, such as an image, are not clipped unless you also set overflow: hidden on the box.
From the team behind the tools
Building a product?
Daniotech builds web, mobile and real-time software for startups and teams. Tell us what you are making and who it is for.