Free CSS Border-Radius Generator — Create Rounded Corners
Generate CSS border-radius values with individual corner control, pixel/percent units, and live preview on sample shapes. Runs entirely in your browser.
What is border-radius in CSS? border-radius rounds the corners of an element by
drawing a quarter-ellipse at each one. One value rounds all four corners equally
(border-radius: 8px); four values run clockwise from the top-left. Percentages resolve against the
element's own width and height, so 50% on a square box produces a circle. The property is part of
CSS Backgrounds and Borders Level 3 and needs no vendor prefix in current browsers.
How to Use the Border-Radius Generator
- Set one radius for all corners — Leave All corners same value on and drag the slider, or type an exact number in the box beside it. The slider covers 0-50; the number field accepts any larger value.
- Switch to per-corner control — Turn the toggle off to reveal four inputs — top-left, top-right, bottom-right and bottom-left. Uneven values are what produce leaf, teardrop and blob silhouettes.
- Pick px or percent — Pixels keep the same curve no matter how the element resizes. Percent scales the curve with the box, which is what you want for avatars and circular badges.
- Try a preset shape — Circle, Pill, Leaf, Blob and Square load known-good corner sets you can then nudge instead of starting from zero.
- Check it on real elements — The preview applies your radius to a square, a rectangle, a circle, a card, a button and an avatar at once, so you can see where the same value reads as too soft or too sharp.
- Copy the CSS or Tailwind class — Copy CSS gives you the shortest valid shorthand. Copy Tailwind gives the nearest utility class from Tailwind's default radius scale.
How CSS Border-Radius Works
Each corner of a box is defined by two radii — one horizontal, one vertical — and the browser joins them into a
quarter-ellipse. When both radii are equal the curve is a quarter-circle, which is what the familiar
border-radius: 8px produces. The full shorthand accepts up to eight lengths, split by a slash:
Omit the slash and the horizontal radii are reused as the vertical ones. How many values you supply decides which
corners they land on, and the order is always clockwise starting at the top-left — the same rotation used by
margin and padding shorthands.
| Values | Example | Which corners |
|---|---|---|
| 1 | 8px | All four corners |
| 2 | 8px 24px | 1st: top-left + bottom-right; 2nd: top-right + bottom-left |
| 3 | 8px 24px 4px | Top-left; top-right + bottom-left; bottom-right |
| 4 | 8px 24px 4px 0 | Top-left, top-right, bottom-right, bottom-left |
| 8 | 40px 10px / 20px 30px | Horizontal radii before the slash, vertical radii after — elliptical corners |
Percentages Resolve Against Two Different Axes
A percentage is not one number applied uniformly. The horizontal radius is a percentage of the box's width and the
vertical radius is a percentage of its height. On a 200 × 100 element, border-radius: 50% means a
100px horizontal radius and a 50px vertical radius, giving a full ellipse rather than a circle. That is why
50% only reads as a circle when width and height match, and why the generator's Circle preset is worth
checking against a square element before you ship it.
When Radii Overlap, the Browser Shrinks Them
Nothing stops you from asking for corners larger than the box. If the two radii along any edge add up to more than
the length of that edge, the CSS specification tells the browser to compute a single scale factor — the smallest
ratio of edge length to the sum of the radii touching it — and multiply every radius by it. All corners shrink
together, so the shape stays proportional instead of collapsing. This is the mechanism behind the pill preset: the
oversized 9999px is silently reduced to exactly half the element's height, which is the largest fully
rounded end a box can have.
Mapping Pixels to Tailwind Classes
The Tailwind output picks the closest class in the default radius scale rather than emitting an arbitrary value, so the result stays inside your design tokens. Values that fall between steps round down to the nearest class; uneven per-corner values have no single class equivalent, so use the CSS output for those.
| Class | Radius | Typical use |
|---|---|---|
rounded-none | 0 | Tables, full-bleed images, data grids |
rounded-sm | 2px | Tags, inline code, small chips |
rounded | 4px | Inputs, checkboxes, compact buttons |
rounded-md | 6px | Default buttons and form fields |
rounded-lg | 8px | Cards, panels, dropdown menus |
rounded-xl | 12px | Feature cards, modals |
rounded-2xl | 16px | Hero panels, mobile sheets |
rounded-3xl | 24px | Large marketing surfaces |
rounded-full | 9999px | Pills, avatars, icon buttons |
Choosing a Radius That Fits the Interface
Radius is a tone control. Zero reads as technical and dense, which is why spreadsheets, code editors and data tables stay square. Small radii of 2-6px soften an edge without drawing attention. Anything past roughly 16px starts to read as playful, and fully rounded pills read as a distinct component type — usually a tag, a filter or a primary action. Trouble usually comes from mixing three or four unrelated values on one screen, so pick two or three steps and reuse them everywhere.
When one rounded box sits inside another — a thumbnail inside a card, a button inside a panel — matching the radii makes the inner corner look pinched. Subtract the gap between them instead: an outer radius of 16px with 8px of padding wants an inner radius near 8px so both curves stay concentric. The same idea applies to a border: the outer edge of a 2px border is 2px further out than the inner edge, so the two curves are never quite identical.
Uneven corners are worth reaching for deliberately rather than by accident. Setting three corners to 0 and one to a large value produces a chat-bubble tail. Setting opposite corners to 0 and the other pair to 50% produces the leaf shape. Blobs come from four different percentages, and because percentages track the box, a blob keeps its character as the element grows.
- Corners are ellipses, not arcs — two radii per corner, eight values in total.
- Percentages are relative to width horizontally and height vertically.
- Radii that do not fit are scaled down together, never clipped.
- Nested boxes need the inner radius reduced by the padding between them.
- A shared two- or three-step radius scale keeps a UI coherent.
Frequently Asked Questions
It rounds the corners of an element's border box, and clips the background and any box-shadow to that rounded outline. Every corner is drawn as a quarter-ellipse defined by a horizontal and a vertical radius. The shorthand accepts one to four lengths for the horizontal radii, optionally followed by a slash and one to four lengths for the vertical radii.
Pixels give a fixed curve that stays the same however the element resizes, which keeps buttons and cards consistent across breakpoints. Percentages resolve against the element's own dimensions — width for the horizontal radius, height for the vertical one — so the curve scales with the box. Use percent for circles, avatars and organic blob shapes; use pixels for everything else.
Set border-radius: 50% on an element whose width and height are equal, or click the Circle preset here. If the box is not square you get an ellipse instead, because the horizontal and vertical radii resolve against different axes. Fixing the aspect ratio with aspect-ratio: 1 or matching width and height values is the reliable way to guarantee a circle.
No. It writes the four-value form, where each corner's horizontal and vertical radii are equal and every corner is a quarter-circle. That covers the large majority of interface work. For true ellipses you need the eight-value slash form, such as border-radius: 40px 10px 40px 10px / 20px 30px 20px 30px, which you can write by hand using the shortest output here as a starting point.
Two common causes. First, if the radii along an edge add up to more than that edge's length, the browser scales all radii down proportionally — a 60px radius on a 40px-tall button becomes 20px. Second, a rounded parent clips a child only if the parent sets overflow: hidden; without it, a square child covers the parent's curve and the corner looks flat.
Not everywhere. Webmail clients and mobile mail apps generally render it, but the Windows desktop versions of Outlook use the Microsoft Word rendering engine and ignore border-radius entirely, showing square corners. Design so square corners are an acceptable fallback rather than a broken layout, and test in the clients your audience actually uses.
Use border-radius for rounded rectangles: it is cheap to render, it clips the background and shadow for you, and the outline stays hit-testable in the usual way. Reach for clip-path when you need straight-edged geometry — hexagons, arrows, diagonal slices — or an animated shape change that rounding cannot express.
No. The generator is plain JavaScript running in your browser; it reads the slider and number fields, writes the shorthand string and applies it to the preview elements directly. Nothing is uploaded or logged. The only thing that leaves the page is the URL, which encodes your corner values so you can share or bookmark a specific shape.
Use Cases
Pill Buttons and Filter Chips
Find the exact radius that turns a chip into a pill at every text length, then reuse it for filter bars and status tags.
Nested Card and Thumbnail Radii
Set an outer card radius, then test the reduced inner radius a thumbnail needs so both curves stay concentric instead of pinching.
Matching a Design System Token
A developer handed a Figma corner value can confirm which Tailwind step or CSS variable it maps to before hard-coding a one-off number.
Organic Blob and Leaf Shapes
Build decorative section backgrounds from four unequal percentage corners, so the shape keeps its character as the container resizes.
Avatar and Icon Button Rounding
Compare a squircle-style pixel radius against a full 50% circle on the same avatar preview before committing the component.