Border Radius Generator

Shaping Corners Without Typing Eight Numbers Blind

• Drag before you type. Each corner handle on the preview controls that corner's horizontal and vertical radius at once — dragging diagonally gets an organic shape close to right in seconds, faster than tuning eight percentage fields one at a time.
• Use px for anything that should stay a predictable rounded rectangle — buttons, cards, avatars. Reach for the percentage-based Advanced mode only once the goal is an asymmetric or organic shape, not a normal rounded corner.
• A 9999px radius, not 50%, is the standard trick for a pill/stadium shape. CSS clamps an oversized radius down to exactly half the element's shorter side automatically, so it stays correct even if the element's height changes later.
• Leave internal padding between rounded corners and content. Text or an image that reaches all the way to a heavily rounded edge will visibly get clipped by the curve.

Features

One Number Rounds a Corner, Two Numbers Sculpt It

border-radius: 12px rounds all four corners identically because it's shorthand for setting the same single value on every corner at once — the setting behind the overwhelming majority of buttons, cards and input fields on the web, and genuinely all that's needed for that case. The moment a corner needs to curve differently on its horizontal and vertical axes — an elongated teardrop instead of a perfect quarter-circle — a single value can no longer describe it, which is exactly the gap the property's full elliptical syntax fills: eight values total, four horizontal radii and four vertical radii, separated by a slash. That extra axis of control is the entire difference between a rounded rectangle and a genuinely organic, hand-drawn-looking blob.

It's worth being honest about what a CSS blob actually is under the hood, too: it's still four quarter-ellipses stitched together at the corners of a rectangle, not a freeform hand-drawn curve. That's why some shapes — anything with a genuine concave dent, or a silhouette that isn't roughly rectangular to begin with — are outside what border-radius can produce at all, regardless of how the eight values are tuned. For those, an SVG path or a clip-path polygon is the more accurate tool; border-radius earns its place for the very large category of shapes that are fundamentally "a rectangle with organically curved corners," which covers most blob decorations actually used on real websites.

Why Percentages Make Better Blobs Than Fixed Pixels

A blob shape built from percentages scales correctly with whatever element it's applied to, since each corner's radius is computed relative to that corner's own share of the box's width and height rather than a fixed number of pixels. Drop the same percentage-based border-radius value onto a small avatar and a large hero image and both get a proportionally similar organic silhouette — try that with a fixed-pixel blob and the small version usually ends up looking like a plain rounded square, since the same pixel curve barely registers against a small box's edges. This is the same underlying reason the Blob, Leaf and Wave presets here use percentages rather than pixel values, and why the drag handles adjust percentage radii once Advanced mode is active rather than fixed pixel offsets.

The iOS Icon preset sits in an interesting middle ground worth calling out specifically. Apple's actual app icon shape is a true superellipse — a continuous mathematical curve, not four circular arcs joined at right angles — which border-radius genuinely cannot reproduce exactly no matter how it's tuned. A single radius around 22% gets close enough that the difference is imperceptible at normal icon sizes, which is why that approximation is the standard practical answer across the vast majority of icon-generation tools, this one included, rather than reaching for a full SVG path just to gain a curve difference nobody actually notices.

Dragging a Corner Is Faster Than Reasoning About Eight Fields

Typing eight independent percentages and mentally reconstructing what shape they'll produce is genuinely difficult — small changes to one corner's horizontal-versus-vertical balance can shift a shape from "gently rounded" to "lopsided" in ways that aren't obvious from the numbers alone, and the same 70% value can read as either subtle or extreme depending entirely on what the other seven values around it are doing. Dragging a handle directly on the rendered shape removes that translation step entirely: the corner visibly stretches in the direction the cursor moves, in real time, which is the same reason design tools like Figma expose corner radius as a draggable handle rather than a numeric-only field in the first place. The number inputs stay available for anyone who needs to land on an exact value, but the handles are the faster path to "that looks right" for anything organic.

Link Corners exists for the opposite situation — once a shape is close and it needs to stay symmetric while its overall roundness is dialed up or down, editing all four corners individually just to keep them matching is unnecessary friction. Switching it on turns every corner into a single shared value, which is also the fastest way to sanity-check whether an asymmetric shape actually needs to be asymmetric in the first place, since toggling it briefly shows what the same silhouette looks like fully uniform.

From a Dragged Shape to a Real Component

A typical path: start from Card or Squircle for anything that's still fundamentally a rectangle with softened corners, or Blob for anything meant to look organic and hand-drawn — then either drag individual handles or hit Random Blob a few times until one variation feels right, since blob shapes are easier to recognize than to design from a blank state. Once the shape is set, pairing it with a gradient fill or a soft shadow is what usually turns a flat colored blob into something that reads as an actual illustrated background element rather than an odd rounded rectangle. A shape that should morph between two or three states — a blob that gently shifts in the background, a button that softens further on hover — is exactly the kind of multi-state motion the animation builder handles, using two blob values from this generator as its start and end keyframes. A card whose corners tighten slightly on hover, rather than a full shape change, needs nothing more elaborate than a transition on the border-radius property directly, without any keyframes at all — worth remembering before reaching for a full animation setup on something a single transition line already covers.

Frequently Asked Questions