Border Radius Generator

The Border Radius Generator builds CSS border-radius values by hand — dragging corner sliders, switching between circles and ellipses, and copying a declaration that is already reduced to its shortest valid form. It is meant for front-end developers and designers who want to preview a shape exactly as a browser will paint it without editing CSS in a separate tab.

How the Two Modes Differ

Simple mode edits one radius per corner: top-left, top-right, bottom-right, bottom-left. That is enough for rounded cards, buttons, and avatars where every corner is a quarter-circle.

Elliptical mode adds a second, independent vertical radius for each corner. Instead of a quarter-circle, a corner becomes a quarter-ellipse, which is how you get squircle-like cards, egg shapes, and organic blobs. Elliptical output uses the slash syntax, where the four horizontal radii come first and the four vertical radii follow: border-radius: 40px 40px 40px 40px / 60px 60px 60px 60px.

A Link corners checkbox ties all four corners together. With linking on, moving one slider moves the rest; turn it off to shape a single corner. The checkbox also drives the vertical radii in Elliptical mode.

How Shorthand Reduction Works

CSS allows you to omit radius values once they repeat. The generator applies the same reduction a browser uses, in this order:

1. If bottom-left equals top-right, drop bottom-left.
2. If three values remain and bottom-right equals top-left, drop bottom-right.
3. If two values remain and top-right equals top-left, drop top-right.

The mapping is worth memorizing. One value sets all four corners. Two values set top-left/bottom-right first, then top-right/bottom-left. Three values set top-left, then top-right/bottom-left, then bottom-right.

Radii (TL, TR, BR, BL)	Generated value
16, 16, 16, 16	16px
20, 40, 20, 40	20px 40px
10, 30, 10, 30	10px 30px
10, 30, 50, 30	10px 30px 50px

The third row is a useful trap: 10px 30px 50px means top-left 10, top-right 30, bottom-right 50, and bottom-left 30, not four independent corners.

Worked Examples

A rounded card in pixels. Link the corners and drag to 16px. The output is border-radius: 16px;, the preview shows a soft 16-pixel round on every corner, and the declaration is as short as CSS allows.

A squircle-style hero panel. Switch to Elliptical mode, set all horizontal radii to 40px, then set the vertical radii to 60px. Because the vertical set is uniform there is no further reduction, and the output becomes border-radius: 40px / 60px;. The corners are taller than they are wide, which reads as a modern rounded rectangle rather than a plain card.

A two-corner accent. Unlink the corners, leave top-left and bottom-right at 10px, and set top-right and bottom-left to 30px. The output reduces to border-radius: 10px 30px; — the same shape as writing all four values, just shorter.

Percentages, Pixels, and Value Choices

Pixels give a corner a fixed physical size that does not change when the element resizes: a 12px radius stays 12px whether the card is 200px wide or 600px wide.

Percentages make the corner scale with the element, but not in the way many people expect. A horizontal percentage is relative to the element’s width and a vertical percentage is relative to its height. That is why 50% on a square becomes a circle, while 50% on a rectangle becomes an ellipse. Percentages are ideal for avatars and circular badges, where the element may be resized but should stay circular. For a pill-shaped button, a fixed radius equal to half the button height — or a deliberately oversized value like 9999px — is the reliable choice.

A few rules of thumb keep generated values from looking off:

• For cards and panels, a radius between 8px and 16px reads as deliberately rounded without being playful. A 4px radius is barely perceptible on a high-DPI screen.
• Buttons usually look best with a radius near half their height (a 40px-tall button with a 20px radius) for a pill, or the same radius as your cards for a squarer look.
• Inputs and buttons in the same form should share a radius so the shapes feel like one system rather than two.
• Elliptical corners draw attention, so use them once per screen — a hero panel or an avatar — rather than on every surface.

One structural detail is worth knowing before you copy the declaration: the generated value is a single border-radius property, not four separate corner properties. If your design system already sets border-radius elsewhere, your new value overrides it, so place the rule where you intend it to win and let the preview confirm the result.

Reading the Generated Declaration

The output panel wraps the value in a small rule so it is ready to paste:

.box {
  border-radius: 10px 30px;
}

The selector and braces are convenience, not part of the value. If you are editing an existing rule, copy only border-radius: 10px 30px;. If you are prototyping from scratch, the whole block is valid CSS as written. The same value appears on the live preview square, which is why the preview is the fastest way to sanity-check an unusual elliptical figure before committing it to a stylesheet.

Common Mistakes

• Expecting 50% to make a pill. On any non-square box it produces an ellipse. Use a half-height pixel value instead.
• Mixing units. border-radius: 10px 50%; is invalid CSS. Pick px or % for the whole declaration.
• Forgetting the slash. Elliptical radii need a b c d / e f g h; without the slash the second set is interpreted as more corner values.
• Assuming large values break. Values over half the smaller dimension are scaled down by the browser, so the visual result is smaller than the number suggests.
• Copying only the value. The output box includes the full .box { ... } block; copy the declaration if you want to paste it into an existing rule.

Related Tools

• CSS Box Shadow Generator — Design layered box shadows with live preview.
• CSS Flexbox Generator — Design flexbox layouts visually and copy the CSS.
• CSS Gradient Generator — Build custom CSS gradients for your layouts.