CSS Border Radius Generator — Free, Elliptical & Auto-Shorthand
Drag per-corner sliders to round any element, then copy the shortest validborder-radius as CSS, Tailwind v4, or SCSS. Independent x/y radii build pills, leaves, blobs, and speech bubbles. Free, 100% in your browser.
Top-Left
Top-Right
Bottom-Right
Bottom-Left
Presets
Elliptical Per-Corner Control
Each corner gets independent x and y radii (30px / 60px), so you can build leaf, blob, and speech-bubble shapes, not just rounded rectangles.
Auto-Shortened CSS Output
Emits the shortest valid shorthand: one value when all corners match, two or three for symmetric patterns, four for full asymmetry, like Prettier.
Multi-Format Export
Copy the CSS declaration, a Tailwind v4 arbitrary value (rounded-[12px_24px]), or an SCSS variable. Tailwind output is escape-safe: spaces become underscores, slashes preserved.
100% Client-Side
No upload, no save, no analytics. Your brand-radius tokens and pre-launch design experiments stay entirely on your device.
CSS Border Radius Generator: build rounded corners and copy the CSS
A border-radius generator turns slider input into a ready-to-paste CSSborder-radius declaration. Set a radius for each corner in px, %, or rem, flip on Elliptical for separate horizontal and vertical values, and copy the auto-shortened result as CSS, a Tailwind v4 arbitrary value, or an SCSS variable. It runs 100% in your browser, free, with no upload.
How to use the border-radius generator
- Pick a unit —
pxfor fixed corners,%for radii that scale with the box, orremfor token-friendly sizes. - Drag each corner slider (Top-Left, Top-Right, Bottom-Right, Bottom-Left). The live preview and CSS update instantly.
- Toggle Elliptical to split each corner into an X (horizontal) and Y (vertical) radius for leaf, blob, and oval shapes.
- Or click a preset (Pill, Circle, Squircle, Leaf, Ticket, Blob, Speech Bubble) to load a known-good shape and tweak from there.
- Choose an output format — CSS declaration, CSS value, Tailwind v4, or SCSS variable — then press Copy.
How CSS border-radius works
border-radius rounds each corner by clipping it to a quarter-ellipse. With one value per corner the horizontal and vertical radii are equal, so the corner is a quarter-circle. Add a slash and a second set of values and each corner becomes a quarter-ellipse: the syntax isborder-radius: TL TR BR BL / TLy TRy BRy BLy. The shorthand expands to four longhands — border-top-left-radius throughborder-bottom-left-radius — and per the MDN border-radius reference, percentages on the horizontal axis resolve against the box width and percentages on the vertical axis against the box height. That is why 50% is a circle on a square but a flattened ellipse on a rectangle.
When you set a radius larger than the box can hold, the browser does not just clamp one corner — the W3C CSS Backgrounds & Borders Level 3 spec runs an overlap-reduction step that scales every radius by one factor until no two adjacent corners overlap. The rule, quoted from the spec:
"Let f = min(Li/Si) … If f < 1, then all corner radii are reduced by multiplying them by f."— CSS Backgrounds and Borders Module Level 3, § corner overlap. Si is the sum of the two radii on a side; Li is that side's length.
Worked examples: input → output
All four corners = 16px
border-radius: 16px;
TL 12, TR 24, BR 12, BL 24 (diagonals match)
border-radius: 12px 24px;
Four equal-diagonal corners collapse to two values.
Elliptical · X = 30px, Y = 60px on every corner
border-radius: 30px / 60px;
Edge case · radius bigger than the box
On a 200×48 button, border-radius: 9999px does not render a 9999px arc. The overlap-reduction factor forces every corner down to 24px (half the 48px height), giving a perfect pill. Raising 9999 to 99999 changes nothing — the clamp already won. This is why the Pill preset uses 999px and still looks identical at any width.
border-radius shorthand reference
This tool always emits the shortest valid form. The table maps each value count to the corners it sets, in CSS clockwise order starting top-left.
| Values | Sets which corners | Example |
|---|---|---|
| 1 value | All four corners equal | 12px |
| 2 values | TL+BR | TR+BL | 12px 24px |
| 3 values | TL | TR+BL | BR | 12px 24px 8px |
| 4 values | TL | TR | BR | BL | 12px 24px 8px 16px |
| x / y | Elliptical — horizontal radii, then vertical radii | 30px / 60px |
The spec rule most generators ignore
The presets here are tuned to the overlap-reduction math, not eyeballed. Pill ships999px on all corners instead of a literal 9999px because the browser clamps to half the shorter side either way — a smaller honest number keeps the copied CSS readable. Circleuses 50% (which only renders a true circle on a square box), and Squircle uses 30%, the practical sweet spot for an iOS-style superellipse approximation in pure CSS.
One gotcha the live preview can hide: children of a rounded element are not clipped to the radius unless the parent has overflow: hidden. An <img> inside a rounded card will poke square corners through the curve until you add it. And for visually concentric nesting, a child's radius should be roughly parent radius − padding, not the same value.
Runs 100% in your browser
Your radius values never leave your device. Every declaration is built locally in JavaScript and copied with your browser's native clipboard — no uploads, nothing leaves your device. I tested all ten presets and every unit, checked that the output collapsed to the shortest shorthand at each corner pattern, and confirmed the Tailwind v4 export stays escape-safe (spaces become underscores, slashes preserved) so rounded-[30px_/_60px] parses correctly.
Frequently asked questions
Is this border-radius generator free?
Yes — 100% free with no signup and no usage cap. Every preset, unit, and export format is available, and the generated CSS is yours to use in any project.
How do I make a perfect pill at any width?
Set border-radius to at least half the element height — 9999px is the common shortcut. The browser shrinks overlapping radii to exactly half the shorter side, so it stays a pill at every width. Avoid 50% on a wide button; it flattens into an ellipse.
When should I use % instead of px?
Use % when the radius should scale with the box (a circle at 50% regardless of size); use px or rem for a fixed visual radius. Percentages resolve against width on the horizontal axis and height on the vertical axis.
Why does my output sometimes collapse to one value?
Because CSS lets you shorten the shorthand when corners repeat. This tool emits one value when all four match, two for the TL+BR / TR+BL pattern, three when only the diagonals match, and four for full asymmetry — matching Prettier output.
Related CSS & color design tools
Fill the rounded shape with a gradient
CSS Box Shadow GeneratorElevate the rounded shape with shadow
CSS Filter GeneratorBlur, brighten & tint the element
Glassmorphism GeneratorFrosted-glass cards with rounded corners
Color Palette GeneratorSource brand-aligned fill colors
Color PickerPick an exact fill in HEX, RGB or HSL
Color ConverterConvert HEX, RGB, HSL & OKLCH
Color Contrast CheckerVerify WCAG 4.5:1 on label text
Flexbox GeneratorLay out rows of rounded cards
Grid GeneratorBuild a CSS grid of card components
Guide: HEX, RGB, HSL & OKLCHChoose the right color model for fills
All Toolk ToolsBrowse the full free tool library
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.