Border-radius generator

What this border-radius generator does

The full border-radius syntax takes eight values — a horizontal and a vertical radius for each of the four corners — and this tool exposes all eight as sliders. Dragging them turns a plain square into a soft, asymmetric blob, previewed live on a gradient tile. Randomize rolls a fresh shape, Reset returns to the default, and the exact declaration is ready to copy.

How to use it

1. Under Horizontal radii, drag the four sliders (top-left, top-right, bottom-right, bottom-left) from 0 to 100%.
2. Under Vertical radii, drag the four sliders for the same corners.
3. Click Randomize for a shape with every value between 20% and 80%, or Reset for the default.
4. Copy the declaration, for example border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;.

How the 8-value syntax works

Each corner is a quarter-ellipse with its own horizontal and vertical radius. The shorthand lists horizontal radii first, then a slash, then vertical radii, both in top-left, top-right, bottom-right, bottom-left order:

/*               TL   TR   BR   BL     TL   TR   BR   BL   */
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;

The top-left corner above has a horizontal radius of 30% of the width and a vertical radius of 30% of the height; the top-right has 70% horizontal and 30% vertical, making a wide, shallow curve. The same thing written as four longhands:

border-top-left-radius: 30% 30%;
border-top-right-radius: 70% 30%;
border-bottom-right-radius: 70% 70%;
border-bottom-left-radius: 30% 70%;

When two adjacent radii add up to more than 100% the browser scales all radii down proportionally until they fit, so nothing overflows — that is why a 100%/100% pair still renders a clean shape rather than breaking.

Percentages vs pixels

Unit	Horizontal radius relative to	Vertical radius relative to	Best for
%	Element width	Element height	Blobs, circles, shapes that scale with the box
px / rem	Fixed length	Fixed length	Buttons, cards, inputs — identical curve at any size

The generator outputs percentages because blobs should scale. For UI corners, prefer a fixed length: border-radius: 50% on a 200×100 element gives an ellipse, not rounded corners, while 12px gives the same 12px curve on every component. Nested elements need a smaller inner radius — outer radius minus padding — or the inner corners look thicker than the outer ones.

Where to use blobs

• Decorative backgrounds: an absolutely positioned blob with a gradient fill behind a hero heading, often with filter: blur(40px) for a soft glow.
• Avatar frames and image masks: set the radius on an img directly; object-fit: cover keeps the photo filling the shape.
• Morphing animation: keyframes between two or three randomized shapes with animation: morph 8s ease-in-out infinite alternate — cheap, since it repaints only the element.
• Buttons with personality: a mild blob (values between 40% and 60%) on a pill-sized button, hover to a different blob.

Compared with clip-path, border-radius keeps box-shadows and borders working and clips child content with overflow: hidden, but it can only produce convex rounded shapes; for stars, chevrons and polygons use the clip-path generator.

Related tools and snippets

• Clip-path generator — angular shapes (triangle, hexagon, star) that border-radius cannot make.
• Box-shadow generator — shadows follow the blob outline automatically.
• Gradient generator — fill the shape with a linear or OKLCH gradient like the preview.
• Aspect ratio calculator — percentage radii depend on the box’s width and height, so pin the ratio first.
• Liquid glass card snippet — a rounded, translucent card that pairs well with blob backgrounds.