Border Radius Generator: Elliptical CSS Corners
Unit
The CSS border-radius property rounds the corners of a box. It is more powerful than it looks: every corner can have a different radius, and each corner can be an ellipse with its own horizontal and vertical radius. That is how pills, circles, leaves, eggs and organic blob shapes are made with a single line of CSS and no image.
This generator gives you all eight values, a horizontal and a vertical radius for each of the four corners, as number fields and sliders. A live preview shows the exact shape, with a handle on each radius that you can drag. Switch between px, % and rem, link the corners so they move together, start from a preset, and copy the result as plain CSS or as a Tailwind arbitrary value.
border-radius rounds the corners of an element's box. One value rounds all four corners equally. You can also give each corner its own radius, and each corner can be an ellipse instead of a circle by giving it a horizontal and a vertical radius.
The values before the slash are the horizontal radii of the corners, in the order top left, top right, bottom right, bottom left. The values after the slash are the vertical radii in the same order. For example border-radius: 30% 70% 70% 30% / 30% 30% 70% 70% draws an organic blob. Without a slash, each corner uses the same number for both directions, which gives a circular curve.
Use px or rem when you want the same curve whatever the size of the element, for example buttons and cards. Use % when the curve should follow the element's width and height, as in a circle (50%) or a blob. A percentage horizontal radius is measured against the width and a vertical one against the height, so the same percentage on a wide box gives an ellipse.
For a pill, set a radius at least half of the shorter side, or any very large value such as 9999px. For a circle, use border-radius: 50% on an element whose width and height are equal. The Pill and Circle presets set this up for you.
When the radii on one side add up to more than the side is long, the browser scales every radius down by the same factor so the curves do not overlap. The preview and the handles show the radii as the browser draws them, so you see the real result.
Copy the Tailwind line. It is an arbitrary value, such as rounded-[24px] or rounded-[30%_70%_70%_30%/30%_30%_70%_70%], where underscores stand in for spaces. It works in Tailwind 3 and later, with no config change.
No. Everything runs in your browser. The settings are only added to the page address so you can bookmark or share the shape.