BrowserTools

Border Radius Generator

Per-corner radii with live preview

By Guga — BrowserTools maintainer, Tbilisi, Georgia Updated 2026-08-23
Free Private No uploads
What is Border Radius Generator?

Linked or per corner, and the difference shows up in the CSS that comes out. In linked mode a single slider drives all four corners and the output collapses to the short form, border-radius: 24px. Unlink it and four independent sliders appear for top-left, top-right, bottom-right and bottom-left, and the output expands to the four-value form, ordered clockwise from the top left exactly as the shorthand requires. A button flips the unit between px and percent, which matters more than it looks: percentages resolve against each side of the box, so 50% on all four corners of a square produces a true circle while 999px turns any rectangle into a pill. Presets cover a card at 8px, a pill, a circle, a leaf with two rounded and two square corners, and a blob.

Set border-radius per corner with linked or independent values and preview squircle-like organic shapes. Copies the exact CSS for every configuration.

Private Border Radius Generator In Your Browser

Border Radius Generator is processed locally with client-side JavaScript. Your files never touch a server, and there is no queue to wait in.

Step-by-Step

How to use Border Radius Generator

1

Keep Linked to drive all four corners from one slider, or press Per corner to expose four separate sliders.

2

Press the unit button to switch between px and percent; the slider range changes with it, 0 to 200 px against 0 to 50%.

3

Press Card, Pill, Circle, Leaf or Blob to load a starting shape, then adjust individual corners from there.

4

Copy the CSS output, which is the short one-value form when all four agree and the clockwise four-value form when they do not.

Key Capabilities
  • The output switches automatically between the one-value and four-value forms depending on whether all four corners agree.
  • Percent and pixel units are both first class, with separate slider limits of 0 to 50% and 0 to 200 px rather than one shared range.
  • The Leaf and Blob presets switch to per-corner mode first, so the linked state cannot flatten the asymmetric values.
  • Values are emitted clockwise from the top left, which is the order the four-value border-radius shorthand requires.
Common Use Cases
  • A designer builds a leaf shape by rounding only the top two corners and copies the resulting four-value declaration.
  • A developer styling a pill button reaches for the percent unit so the shape survives translation into a longer language.
  • Someone matching a design file needs the exact four-corner radius of an asymmetric element and reads it off the sliders.
Clear Answers

Frequently Asked Questions

Why use percent instead of a large pixel value for a pill?
A pixel radius is a fixed distance, so a long label on one screen and a short one on another produce different shapes. A percentage resolves against the box itself, so the ends stay fully rounded whatever the content does to the width.
Why is my circle slightly oval?
Because 50% of the horizontal side and 50% of the vertical side are only equal when the box is square. A percentage radius follows the box's proportions, so use px values derived from the shorter side if the element is not square.
Can CSS make a real squircle, the shape on modern phones?
Not with border-radius — the corners are circular arcs. A true continuous curve needs clip-path with a path or polygon approximation, or an SVG mask. This generator covers rounded rectangles; the squircle is a different technique.
What happens if a radius exceeds half the side?
The browser scales the corners down proportionally so they never overlap, which is why very large pixel values on a small box stop growing past a full pill. The value in the CSS is unchanged; the rendering is simply clamped.