CSS border radius generator
Shape corners with sliders, switch to blob mode for organic shapes, and copy the live border-radius CSS.
border-radius: 24px;Runs entirely in your browser — nothing is uploaded.
How it works
- In Simple mode, drag the four corner sliders — top left, top right, bottom right, bottom left — and watch the preview box round off in real time.
- Switch to Blob mode to control the horizontal and vertical radius of each corner separately, or press Randomize to jump to a fresh organic shape.
- Copy the generated border-radius declaration and paste it into your stylesheet — it works in every modern browser with no prefixes.
Frequently asked questions
- What does the slash in a border-radius value mean?
- Values before the slash set the horizontal radius of each corner and values after it set the vertical radius, in the order top-left, top-right, bottom-right, bottom-left. When the two differ, the corner becomes a quarter of an ellipse instead of a circle, which is what makes blob shapes possible. Without a slash, each corner is a simple circular arc.
- How do I make an organic blob shape with CSS?
- Use eight percentage values with the slash syntax so every corner gets an independent horizontal and vertical radius. Shapes look most natural when opposing radii along each edge roughly add up to 100% — that keeps the outline flowing instead of pinching. The Randomize button here generates values with exactly that constraint.
- Should I use pixels or percentages for border-radius?
- Pixels give a fixed corner size that stays constant as the element resizes, which suits cards and buttons. Percentages scale with the element — horizontal radii resolve against its width and vertical radii against its height — so they are the right choice for blobs and for perfect circles (50% on a square). This tool uses pixels in Simple mode and percentages in Blob mode for that reason.
- Why does a large radius sometimes look wrong on small elements?
- When the radii on one edge add up to more than the edge length, the browser scales all of them down proportionally so they fit. That is why 100px corners on a 120px-tall button collapse into a pill rather than overlapping. If the preview differs from your real element, check that both have similar proportions.
- Is anything I design here uploaded or tracked?
- No. The tool is plain client-side code — the preview is rendered by your own browser’s CSS engine and the output string is assembled locally. Nothing leaves your device, and the result is a standard declaration supported everywhere without vendor prefixes.
About this tool
border-radius is one of the few CSS properties with a hidden second half. Most developers only ever write one to four lengths, which round each corner with a circular arc. But the full syntax accepts eight values split by a slash — a horizontal and a vertical radius per corner — and that unlocks elliptical corners and the soft, asymmetric blob shapes used in modern hero sections, avatars and decorative backgrounds. This generator exposes both halves: a Simple mode with one pixel slider per corner for everyday cards and buttons, and a Blob mode with paired percentage sliders for full eight-value control.
Everything renders live. The preview box is drawn by your own browser applying the exact declaration shown below it, so what you see is precisely what ships — no approximation, no server round-trip, nothing uploaded. Simple mode collapses equal corners into the shortest possible value, while Blob mode always emits the explicit slash form, for example 30% 70% 70% 30% / 30% 30% 70% 70%. One click copies the finished CSS.
The Randomize button in Blob mode is more than a dice roll. Truly random radii tend to produce pinched, dented outlines; convincing blobs follow a rule of thumb where the two radii along each edge sum to roughly 100%, so the curve hands off smoothly from one corner to the next. Randomize generates values under that constraint, giving you an endless stream of usable organic shapes for section dividers, image masks and illustration backdrops.
Practical tips: percentages resolve against width horizontally and height vertically, so the same blob value looks different on a wide banner than on a square — test at your real aspect ratio. For circles, 50% on a square element is all you need. And when animating between blob shapes, keep the same eight-value structure in both keyframes so the browser can interpolate each radius smoothly.