Round each corner with sliders, elliptical corners and blob shapes, shortest CSS to copy
Runs in your browser. Nothing you type is sent anywhere. Checked against sources on 22 Oct 2026.Border-radius takes one to four values in the order top-left, top-right, bottom-right, bottom-left, so border-radius 12px 12px 0 0 rounds only the top. Values after a slash set the vertical radius, giving elliptical corners. 50% makes a square into a circle; 9999px makes any button a pill.
Pick a preset such as Card, Pill or Circle, or paste a border-radius value you already have.
Move one slider to round all corners, or unlink them to set each corner on its own.
Turn on Elliptical for a different horizontal and vertical radius per corner.
Copy the border-radius line, or the four longhand lines.
Rounded corners take one line of CSS, but the shorthand packs up to eight numbers into it. This generator sets them with sliders, shows the shape live and writes the shortest line that means the same thing.
One value or four. With the corners linked, one slider rounds all four. Unlink them to set each corner, in the order the CSS uses: top-left, top-right, bottom-right, bottom-left. Repeated values are dropped by the same rule the browser uses to fill them back in, so 8px 4px 8px 4px is written 8px 4px.
Elliptical corners. Turn on Elliptical and each corner gets a horizontal and a vertical radius. The shorthand then has two lists split by a slash: horizontal radii first, vertical after.
| Shape | border-radius |
|---|---|
| Card | 16px |
| Pill button | 9999px |
| Circle (on a square) | 50% |
| Tab | 12px 12px 0 0 |
| Egg | 50% / 60% 60% 40% 40% |
What the browser draws. When two radii along one side add up to more than that side, the browser shrinks every radius by the same factor until they fit. That is why 9999px makes a pill: on a 40px tall button every corner becomes 20px. The page shows the radii actually drawn on the preview box and says when they were shrunk.
Blobs. Blob mode makes organic shapes from eight percentages. Random picks new ones where the facing radii on each side add to exactly 100%, so curves meet with no flat edge and nothing is shrunk.
Paste an existing border-radius value to edit it. Units can be px, %, rem or em, one unit at a time. Nothing leaves your browser. Related tools: Box Shadow Generator, Glassmorphism Generator, CSS Gradient Generator.
Write border-radius: 12px 12px 0 0. The four values go clockwise from the top-left: top-left, top-right, bottom-right, bottom-left. For one corner only, the longhand border-top-left-radius: 12px is clearer. Unlink the corners above and the page writes whichever form is shorter.
Values before the slash are horizontal radii and values after it are vertical radii, which makes each corner a quarter of an ellipse rather than a circle. So border-radius: 50% / 30% gives wide, flat curves. Without a slash, both radii of every corner are the same.
Use 9999px for a pill. Percentages are measured separately on each axis, so 50% on a wide button gives an oval with no straight edges. A very large length is shrunk by the browser until the corners just fit, which leaves round ends and a straight middle at any size.
Give a square element border-radius: 50%. Each corner's radius becomes half the side in both directions, so the four quarter circles meet in a full circle. On a rectangle, the same 50% gives an ellipse; set equal width and height, or aspect-ratio: 1, to keep it round.
Browsers never let two curves overlap. When the radii along one side add up to more than its length, every radius on the element is scaled down by the same factor. The page shows the radii actually drawn on the preview box and the factor applied.
Yes. Paste a value such as 30% 70% 70% 30% / 30% 30% 70% 70%, with or without border-radius: in front, and the sliders take its values. Use one unit, px, %, rem or em; a value that mixes units or uses calc() is pointed out instead.
Rates and rules change; check the source before you rely on a figure.
Still stuck? Ask about CSS Border Radius Generator and anybody who knows can answer. No account needed.
Same job, other tools: Sitemap Index Generator – Split a large site into numbered sitemaps with an index file.
On the related tools: Cron Expression Generator – Generate a cron expression by choosing when the job should run · Google Analytics URL Builder – The five utm parameters GA4 reads, with the naming traps flagged.