Border Radius Generator
Visual border-radius builder with per-corner control and elliptical radii
How to Border Radius Generator Online
Build a CSS border-radius value visually with per-corner control and optional elliptical radii.
- Leave 'All corners equal' checked and drag the single slider to set a uniform rounded look. This covers most use cases.
- Uncheck 'All corners equal' to control each corner independently with four sliders.
- Check 'Elliptical' to add a second set of Y-axis sliders — each corner gets a separate horizontal and vertical curve, enabling squircle and asymmetric shapes.
- The live preview shows the result on a 192×192 box with a gradient background — large enough to see corner detail.
- Click 'Reset' to return all corners to 0.
- Copy the generated CSS at the bottom and paste it into your stylesheet.
About Border Radius Generator
Border radius is the single most overlooked design control in CSS. The default value across every browser is `0` — sharp corners, machine-rendered, alienating. Designers reach for it constantly — every button, every card, every modal, every input field — because soft corners are universally read as friendlier and more modern. The CSS `border-radius` property has been universal since 2010, and the syntax is more flexible than most developers realize.
The simple case is **one value, all corners equal**: `border-radius: 8px` produces a uniformly rounded rectangle. The vast majority of real-world UIs use this form. The convention in modern design systems is small consistent radii — 4 to 8 pixels — applied uniformly across all interactive elements. Tailwind's `rounded` utilities go further: `rounded-sm` (2px), `rounded` (4px), `rounded-md` (6px), `rounded-lg` (8px), `rounded-xl` (12px), `rounded-2xl` (16px). Pick one for buttons and inputs, one larger for cards.
The next form is **four values, one per corner**, clockwise from top-left: `border-radius: 8px 20px 8px 20px` rounds the top-left and bottom-right at 8px, top-right and bottom-left at 20px. This is how chat bubbles get their characteristic asymmetric shape — round all corners except the one pointing at the speaker. It is also how onboarding tooltips, callout boxes, and "from-X" message bubbles are built.
The most flexible form is **eight values with the slash separator**: `border-radius: 50px 25px 50px 25px / 25px 50px 25px 50px`. The half before the slash sets the X (horizontal) curve at each corner; the half after sets the Y (vertical) curve. With independent X and Y radii you can build genuine elliptical shapes — squircles (Apple's app icon shape), leaf shapes, organic blobs, and curving asymmetric containers. This level of control is rarely needed but is the difference between "modern" and "designed by a human" when you do reach for it.
A subtle but useful property: **`border-radius: 50%` produces circles and ellipses.** Percentages are computed against the box's own width (X axis) and height (Y axis). On a square box that means each corner's quarter-ellipse fits the half-width — and the four quarters together make a circle. On a rectangular box you get an ellipse. `border-radius: 9999px` is the common "pill" idiom — any radius value larger than half the shortest side gets clipped to that maximum, which produces fully-rounded ends regardless of how wide the box gets.
**Squircles** deserve a special mention. The shape midway between a square and a circle, popularized by Apple in iOS app icons, is mathematically a *superellipse* — a curve that CSS does not support natively. The closest approximation in CSS is elliptical radii: turn on the elliptical option, set the X radii to about 40% of the box's smaller side, and the Y radii to about 30%. The result is visually indistinguishable from a true squircle at typical UI sizes (≤ 200px). For pixel-perfect squircles at large sizes, you need SVG `<path>` with a superellipse formula, or a CSS `clip-path` with a manually-tuned polygon.
A common gotcha: when corner radii exceed half the box's smallest side, browsers silently clip them. `border-radius: 100px` on a 50px-tall element renders as 25px because that's the maximum the geometry allows. This is per the CSS spec and is consistent across browsers, but it means the value you wrote may not be the value that renders. Pay attention to the preview — if the corners look smaller than expected, you have hit the cap. The fix is either smaller radius values or a larger box.
Everything in this tool runs in your browser. The preview is a real `<div>` with the exact `border-radius` declaration copied to your clipboard. No network requests during interaction, no canvas tricks, no SVG rendering — what you see is what your users will see.
Related Tools
Frequently Asked Questions
What is the difference between the 4-value and 8-value forms?
**4-value** sets the circular radius for each corner: `border-radius: 10px 20px 10px 20px` → top-left, top-right, bottom-right, bottom-left (clockwise from top-left). **8-value** with a `/` separator sets elliptical radii — the X (horizontal) radius and the Y (vertical) radius separately for each corner. `border-radius: 50px 25px / 25px 50px` lets you build asymmetric, organic-looking shapes like 'squircles' or leaf shapes. Most designs only need the 4-value form.
What is a squircle and how do I make one?
A squircle is a shape midway between a square and a circle — softer than a rounded-rectangle but still mostly square. Apple uses squircles for app icons. The CSS approximation: turn on Elliptical, set all X radii to the same value (~40% of the side length), all Y radii to a slightly different value (~30%). Genuine squircles use a superellipse formula that CSS doesn't support natively, but the elliptical approximation is close enough for most uses.
Why does 50% turn my box into a circle?
Because each corner radius is measured as a percentage of the box's *width* (for X) and *height* (for Y). When all four corners are 50% on both axes, every corner traces a quarter of an ellipse fitted to the box's dimensions — and an ellipse fitted to a square is a circle. Apply `border-radius: 50%` to a square element and it becomes a perfect circle; apply it to a rectangle and it becomes an ellipse. Pure pixels (px) do not scale with the box, so a 50px radius on a 100px box looks the same regardless of the box's actual size.
Should I use px or %?
Use **px** for fixed-shape elements (buttons, cards, badges) where the radius should look the same regardless of the element's size. Use **%** for circular or pill-shaped elements that should scale with their container. Common patterns: `8px` for cards, `4px` for buttons, `50%` for avatars/circles, `9999px` for pills (any large px value works to fully round both ends).
Why does the bottom-right corner look different from the top-left even when both are set to 20px?
If you have a non-square box and the corner radii are larger than half the smallest side, browsers clip the radii to fit. `border-radius: 100px` on a 50-tall element silently becomes 25px on the affected sides. This is a CSS-spec behavior and matches what every browser does. To check if you're hitting the cap, watch the rendered shape — corners should always look symmetric for matched values.
Can I animate border-radius?
Yes. Both `transition: border-radius 200ms` and `@keyframes` work. CSS interpolates each corner's radius value independently, which produces smooth shape morphs. This is how morphing-blob backgrounds and pill-becomes-circle button states are built. Avoid animating from a 4-value form to a `/` 8-value form — the interpolation rules between those are spec-defined but messy in practice; pick one form and stick with it for animations.
Is anything sent to a server?
No. The preview is a live CSS render of a `<div>` with the exact same `border-radius` string copied to your clipboard. No network requests during interaction.