About the CSS Border-Radius Generator
The CSS border-radius property can take up to eight separate values — two per corner — to create asymmetric, organic 'blob' shapes rather than plain uniform rounded rectangles, but remembering the exact slash syntax for horizontal versus vertical radii is genuinely hard to do from memory. This tool exposes each corner as its own pair of sliders and builds the correct border-radius shorthand for you automatically.
How it works
Each of the four corners has two independent controls — horizontal radius and vertical radius — which together let a corner be perfectly round, subtly rounded, or stretched into an organic blob-like curve. The preview box updates live as you adjust each slider, and the generator writes out the full eight-value border-radius shorthand using the correct slash syntax, ready to paste directly into your CSS.
Common use cases
- Designing organic, blob-shaped background shapes for a hero section
- Creating asymmetric rounded cards that feel less generic than uniform rounded corners
- Building speech-bubble or callout shapes using extreme single-corner radii
- Prototyping a brand's signature shape language for buttons and containers
- Learning how the eight-value border-radius shorthand syntax actually works
Tips for best results
For a shape that reads as intentional rather than accidental, keep radius values on opposite corners related — for example, mirror the top-left and bottom-right values while varying the other two — rather than randomizing all eight values independently. Very large radius percentages (60-70%+) on a square box will produce a nearly circular blob, which works well as a soft background shape behind other content. This same eight-value shorthand is what CSS uses internally even for the simple, everyday case of a single uniform border-radius value, which is really just shorthand for setting all eight values identically in one go. Beyond decorative shapes, subtle asymmetry in border-radius — a couple of pixels' difference between two adjacent corners — is a technique some design systems use deliberately to make flat, digital shapes feel slightly more organic and less mechanically perfect.
Frequently asked questions
Each corner's radius can be elliptical rather than perfectly circular, which is why CSS allows a horizontal and vertical radius per corner, separated by a slash in the shorthand syntax. This is what makes organic, non-circular blob shapes possible.
Yes — the generator supports both pixel and percentage units. Percentages are especially useful for blob shapes since they scale proportionally if the element's size changes, unlike a fixed pixel radius.
Set all corners to 50% on an element with equal width and height, which is the standard technique for turning a square box into a perfect circle using only border-radius.
You can get close by pushing one corner's radius to 0 and the opposite corner to a large value, though a true speech bubble tail usually also needs a small pseudo-element triangle in addition to border-radius.
border-radius has been supported without vendor prefixes since Internet Explorer 9 and every modern browser since, so the generated CSS is safe for virtually any current audience.