Back to Tools

Border Radius Generator

Create organic and perfectly rounded shapes

Shape Master

Horizontal (X-Axis)

Top Left: 30%

Top Right: 70%

Bottom Right: 70%

Bottom Left: 30%

Vertical (Y-Axis)

Top Left: 30%

Top Right: 30%

Bottom Right: 70%

Bottom Left: 70%

Organic Presets

Live Shape Preview

Beyond simple rounded corners

Most developers know border-radius with a single value, but the property can describe each corner as an ellipse, which is how the smooth, irregular blobs seen on modern landing pages are made. Writing eight percentages in the right order by hand is confusing. This generator gives every corner its own horizontal and vertical slider, shows the resulting shape immediately, and hands you the complete declaration.

How to shape your element

In Horizontal (X-Axis), drag the Top Left, Top Right, Bottom Right and Bottom Left sliders. Each runs from 0 to 100 percent and shows its number beside the label.
In Vertical (Y-Axis), adjust the same four corners. Together, the horizontal and vertical values of a corner define the curve of that corner.
Or click a preset under Organic Presets: Perfect Circle, Organic Blob, Egg Shape, Pill Shape or Leaf Style. The sliders jump to those values.
Click Generate Border Radius.
Look at the Live Shape Preview, a 200 pixel box, then press Copy CSS.

Moving a slider hides the earlier result, so press Generate after finishing your adjustments.

Reading the output

The tool writes a single line in the form border-radius: four horizontal values, a slash, then four vertical values, all in percent. The horizontal values come first, in the order top left, top right, bottom right, bottom left. The vertical values follow the slash in the same corner order. For example, equal values of 50 percent everywhere yields a circle on a square element.

Typical uses

Blob-shaped backgrounds and image masks in hero sections.
Speech-bubble, leaf or pebble shaped buttons and cards.
Profile avatars with an irregular outline for a playful brand.
Understanding how the slash syntax in border-radius works by seeing it change live.

Watch out for these details

Percentages are relative to the size of the element, and the preview is a perfect square. On a rectangle, the same numbers produce a stretched shape, so a circle preset becomes an ellipse. If you need a true circle, make the element square, and for a pill, using a large fixed pixel value on your own element is often more predictable than percentages.

The sliders only go up to 100 percent and only work in percent. If your design system uses pixels or rem units, replace the numbers in the copied line yourself. Also, browsers scale radii down when neighbouring corners overlap, so extreme combinations may look different from what the numbers suggest.

Related Tools

Frequently Asked Questions

Why does the code contain a slash?

The part before the slash lists the horizontal radii of the four corners, and the part after lists the vertical radii. Using different values for each direction makes the elliptical curves that create organic shapes.

In what order are the corners listed?

Top left, top right, bottom right, then bottom left, both before and after the slash. The sliders in the tool follow the same order, so you can match each number to a corner.

Why does my circle look like an oval on my page?

The preview is square and the radii are percentages of the element size. On an element wider than it is tall, 50 percent gives an ellipse. Make the element's width and height equal for a circle.

Can I use pixels instead of percentages?

The tool outputs percentages only. You can edit the copied code and swap in pixel or rem values, keeping the same order and the slash, if your layout needs fixed sizes.

What do the presets change?

Each preset sets all eight sliders at once, for example every value at 50 for a Perfect Circle or 100 for a Pill Shape. You can keep adjusting individual sliders afterwards and generate again.