Border Radius Generator

How to use the border radius generator

1. Drag the dots on the edges of the preview. Each colored dot sets the horizontal radius of a corner; with Elliptical corners (8 values) ticked, the white dots set the vertical radii.
2. Or type exact values in Corners: Top left, Top right, Bottom right and Bottom left, each with a Horizontal and a Vertical field.
3. Choose the Unit: % (percent of the box) or px (pixels). Switching converts the current values, so the shape stays the same.
4. Set Box width (px) and Box height (px) to match your element, and use All corners to round every corner at once.
5. Try the Presets (Rounded, Pill, Circle, Leaf, Drop, Egg, Ticket and three blobs) or click Random blob for an organic shape.
6. Tick Longhand properties if you prefer the four border-*-radius declarations, then copy the CSS code with Copy.

Keyboard: focus a dot and press the arrow keys to change its radius by one step (10 with Shift).

The border-radius syntax

border-radius takes one to four values, in the order top-left, top-right, bottom-right, bottom-left. Like margins, missing values are copied from the opposite corner: border-radius: 10px 20px rounds top-left and bottom-right by 10px, and the other two by 20px. The tool always writes the shortest equivalent form.

Each corner is actually a quarter of an ellipse with two radii. A slash separates the horizontal radii from the vertical ones, which gives up to eight values:

border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

Before the slash: the horizontal radii of the four corners. After it: the vertical radii. When both lists are equal, the slash part is dropped.

Pixels or percentages?

• px gives the same curve whatever the size of the element. It is the right choice for buttons, cards and inputs: border-radius: 8px.
• % is relative to the element: horizontal radii to its width, vertical radii to its height. 50% turns a square into a circle and a rectangle into an ellipse. Percentages are what makes blob shapes scale with the element.

For a pill-shaped button, use a pixel radius of at least half the height. The Pill preset does exactly that for the box size you entered; a huge value such as 999px works too.

When adjacent radii add up to more than the side they share, browsers scale all radii down proportionally until they fit. That is why dragging two handles past each other does not break the shape.

Blob shapes

The blob presets and Random blob use eight percentages where the two handles on each side add up to 100 %. The curves then meet exactly and the shape looks like a smooth pebble. Animate between two blobs with a CSS transition on border-radius for a “morphing” effect.