Border Radius Generator
Design asymmetric 8-value corners and organic blob shapes against a live preview and copy working CSS — entirely on this device.
Drag a corner handle, or use the sliders.
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%48 B
Press ? for shortcuts
Do it offline:$ printf 'border-radius: 30%% 70%% 70%% 30%% / 30%% 30%% 70%% 70%%;\n' >> card.css
How to use it
- Set each corner with its slider or number field; the % and px toggle changes the unit for all eight, never the digits.
- Or drag the handles on the preview box — each maps your pointer onto that corner's radius and writes it back live.
- Press Regenerate for a new seeded blob, or type a seed to reproduce a shape exactly.
- Load a preset chip — rounded, circle, pill, leaf, egg or organic — as a known starting point.
- Copy the collapsed value, download a .css file, or share the eight radii as a link; the paste field imports an existing value.
Shape all eight border-radius values — four horizontal, four vertical — from sliders, draggable corner handles or a paste-in field, and a live box rounds to match. The Regenerate button rolls a seeded blob, and presets cover circles, pills and leaf shapes. The value comes out collapsed to its shortest form, ready to copy, download or share, and stays on your device.
How it works
A full value carries eight numbers: four horizontal radii, then after a slash four vertical ones, each quartet read clockwise from the top-left (TL, TR, BR, BL). Matching quartets drop the slash. Each quartet collapses margin-style — one token when all four agree, four when none do. A percentage resolves against the width across and the height down, so 50% everywhere is a circle on a square.
Regenerate is a seeded generator: a seed drives a mulberry32 sequence that draws the eight radii in a fixed order, each between 15% and 85%, keeping the shape lopsided but readable. The draw is deterministic, so one seed always returns the same blob; the permalink stores the finished radii, not the seed.
Examples
Default blob — the opening shapeborder-radius: 30% 70% 70% 30% / 30% 30% 70% 70%The page opens on this shape, not a blank box; the quartets differ, so the slash stays and all eight values print.
Preset: rounded — 16px all cornersborder-radius: 16pxFour equal corners collapse to one token, and 16 keeps its unit — the plainest rounded card.
Regenerate — blob from seed 42border-radius: 57% 46% 75% 62% / 27% 52% 34% 59%Seed 42 draws this blob; type 42 again and the same eight radii return, byte for byte.
0 50% 0 50%border-radius: 0 50%The leaf value rounds two corners and squares two; matching diagonals print it as two tokens, the bare 0 dropping its unit.
Every example on this page is executed against the same engine that powers the tool, on every build.
Gotchas worth knowing
Overlapping corners are scaled, not clipped
When two radii on an edge would overrun the box side, the browser scales them all down at paint. The copied value keeps its numbers, so a wide-box shape can look tighter once it narrows.
Switching % to px keeps the number
Flip a corner from 50% to px and it reads 50px: the digit stays and the shape changes. Converting the real size is a unit converter's job, not a silent rewrite here.
Pill and circle are just extreme radii
A radius past half the shortest side caps at a semicircle — the pill; 50% on every corner of a square is the circle. Both print short through the collapse law.
Import refuses; it never guesses
Negatives, mixed units, calc() or var(), and over four values a side are turned down with the offending token highlighted for Jump to error. Anything past the 256-character cap is refused whole.
Only physical corners come out
Output is the border-radius shorthand alone; logical properties like border-start-start-radius, the per-corner longhands and an SVG clip-path blob all stay out of scope.
Common errors
`10em` isn't supported here — this tool takes % or px values (bare 0 allowed).- Only % or px lengths and a bare 0 are accepted; em, calc(), var() and unitless numbers are refused, not guessed at.
`-4px` is negative — border-radius can't be negative.- A corner radius is a distance, so it can never go below zero; the offending token is quoted and selected to fix.
`20%` mixes units — this tool uses one unit for the whole value, % or px.- One value carries one unit throughout; combine % and px and the first token that breaks the rule is named.
Too many values — each side of a border-radius takes at most 4, but this side has 5.- Each side of the slash holds four values at most, one per corner; a fifth is refused with the count the parser saw.
A `/` separates horizontal and vertical radii — each side needs at least one value.- A slash needs a value on both sides; leaving one half empty stops the parser and anchors the error on the gap.
Nothing to import — paste a border-radius value like `16px` or `30% 70% 70% 30% / 30% 30% 70% 70%`.- The import field shows this when it is blank — a prompt, not a failure, naming the two shapes of value you can paste.
Input is longer than the 256-character import limit for this tool.- Pastes past 256 characters are refused whole, never truncated, since a real value is far shorter; the banner adds this page's CLI line.
FAQ
What does the slash in a border-radius value do?
It splits the horizontal radii from the vertical ones. Numbers before it round each corner across the box; those after round it down. No slash shares one value for circular corners; a slash gives ellipses.
How do I make a blob shape in CSS?
Give one element very different radii on its two axes — say 30% 70% 70% 30% then, after a slash, 30% 30% 70% 70% — and the corners bulge into an organic outline. Regenerate rolls those numbers from a seed; leaf, egg and organic are ready-made.
Why does my radius look clamped or different in the browser?
The browser applies a rule the value hides: when two radii on an edge overlap, all of them shrink by one factor to fit. Your declaration keeps its numbers, so a corner tuned wide looks tighter when the box narrows.
Keyboard shortcuts
- ⌘/Ctrl + C
- Copy the border-radius declaration when nothing is selected; a typing field keeps its own copy.
- ⌘/Ctrl + Shift + C
- Copy the declaration whatever is selected.
- ⌘/Ctrl + S
- Save the value as a .css download, not the browser's save-page dialog.
- ⌘/Ctrl + Enter
- Regenerate the blob from a fresh seed.
- t
- Switch the color theme, unless a field has focus.
- ? or ⌘/Ctrl + /
- Open the keyboard-shortcut overlay.
- Esc
- Close the topmost dialog; the corners stay put.