Contact

Tools  /  CSS  /  Border Radius Generator

CSS

Border Radius Generator

Round each corner independently, switch to elliptical horizontal/vertical radii for organic blob shapes, pick a preset (circle, pill, squircle, blob), randomize, and export as CSS, Tailwind, SCSS, React or a CSS custom property.

More CSS tools

CSS Glow Generator CSS Button Generator CSS Card Generator CSS Tooltip Generator CSS Toggle / Switch Generator CSS Spinner / Loader Generator

What this tool does

Builds a border-radius value corner by corner, including CSS's lesser-known elliptical syntax for organic blob shapes that a single rounded-corner value can't produce.

Independent corners

Each of the four corners has its own slider and numeric field, in px, %, or rem. A linked-corners toggle locks them together when uniform rounding is wanted instead of adjusting each one by hand.

Elliptical corners for blob shapes

CSS actually supports a horizontal AND a vertical radius per corner, separated by a slash in the shorthand — most rounded- corner tools skip this entirely. Turning on elliptical corners reveals a second set of four sliders for the vertical radii, making genuinely organic, uneven blob shapes possible rather than just rounder rectangles.

Presets and randomizing

Eight presets cover the common shapes — sharp, card, circle, pill, squircle, and three blob variations (teardrop, wave, amoeba) built from asymmetric elliptical corners. A randomize-blob button generates a fresh organic shape instantly when a specific look isn't needed, only "something interesting."

Preview and export

The preview box can be checked at four aspect ratios — rectangle, square, widescreen, or portrait — since how a radius reads changes with the shape it's applied to. The generated value exports as plain CSS, a Tailwind arbitrary value, an SCSS variable, a React inline style, or a CSS custom property with a fallback, copyable with one click.

Privacy

Everything runs locally in your browser -- nothing you build is sent to a server.

FAQ

Frequently asked questions

Is my data uploaded anywhere?
No. The shape is built and rendered entirely in the browser -- nothing is sent to a server.
What are elliptical corners, and why would I need them?
CSS border-radius actually supports a separate horizontal and vertical radius per corner. Turning elliptical corners on exposes that second set of controls, which is what makes genuinely organic, asymmetric blob shapes possible -- a single rounded value can only ever produce a rounder rectangle.
Can I round all four corners together instead of one at a time?
Yes -- the linked-corners toggle locks all four to the same value, so one slider adjusts every corner at once.
What do the blob presets do?
Teardrop, Wave, and Amoeba each set a specific combination of asymmetric horizontal and vertical corner radii to produce a distinct organic shape, ready to use as a starting point.
Why does it offer different preview aspect ratios?
A given radius looks different depending on the shape it is applied to -- checking it against a square, a rectangle, a widescreen box, and a portrait box catches a shape that only looks right in one of them.
What export formats are available?
Plain CSS, a Tailwind arbitrary value, an SCSS variable, a React inline style property, or a CSS custom property with its usage line -- selectable from a dropdown next to the code output.
Theme Accent