CSS Border Radius Generator for Each Corner
Adjust corner radii and copy the CSS border-radius declaration. Use the preview to compare uniform, individual, and elliptical corners.
CSS Border Radius Generator workspace
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
Your radius values are processed on your device. No request or analytics event contains your design tokens or pre-launch experiments.
CSS Border Radius Generator: build rounded corners and copy the CSS
Adjust corner radii and copy the CSS border-radius declaration. Use the preview to compare uniform, individual, and elliptical corners. Percentage and length-based radii respond differently to changing element dimensions. A shape that looks right in the preview may change on a taller or narrower element. Test the generated declaration with the real content and responsive sizes.
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.
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: September 15, 2026 · Runs 100% in your browser — no uploads, tool input is not sent to Toolk.
Frequently asked questions
How do I make only some corners rounded?
Unlock the link between corners and set each of the four values independently — top-left, top-right, bottom-right, bottom-left. The generator emits them in CSS order as border-radius: tl tr br bl, so one declaration covers every corner.
When should I use percentage radii instead of pixels?
Percentages scale with the element's size — 50% turns any box into an ellipse or pill — while px stays fixed regardless of dimensions. Use px to match a design token exactly and % when one class must stay proportional across many sizes.
What does the eight-value slash syntax do in border-radius?
CSS accepts horizontal and vertical radii separated by a slash, like 10px 20px / 20px 10px, which produces organic squircle-style curves no single value can create. The copy output switches to whichever form matches your current settings.
Is anything I type here sent to a server?
No. Radius values are converted to CSS locally in your browser, and Toolk's page analytics do not receive the numbers you enter. Copying uses the browser's native clipboard, so tool input is not sent to Toolk.