How do I generate CSS border-radius for each corner?

Turn off Unified (all corners equal) and set each corner's slider while watching the preview. Choose the Unit, px or %, then press Copy to get the border-radius declaration.

How do I make an organic blob shape with CSS?

Turn on Elliptical (X / Y syntax) to set horizontal and vertical radii separately per corner, or press Random blob. The output uses the slash syntax, for example 32px 20px 20px 32px / 20px 32px 20px 32px.

Should I use px or percent for border radius?

Use px for a fixed corner size regardless of box size. Use % for radii relative to the element, such as 50% for a circle on a square. The Unit control switches between them; sliders go up to 200 px or 100 percent.

Can I copy the result as a Tailwind class?

Yes. Switch the output format to Tailwind to copy an arbitrary-value class like rounded-[...] instead of the CSS declaration.

Can I test the radius on a different box size?

Yes. The Width and Height sliders resize the preview from 64 to 320 px, so you can check how the same radius looks on narrow, wide or tall elements.

Yes. Every tool is free to use, with no account and no credit card. The work runs on your device rather than on our servers, which is what keeps it free to run.

Does it work on mobile?

Yes. It runs in current mobile browsers on iOS and Android, with nothing to install.

◖

Free CSS Border Radius Generator

Visually design rounded corners with independent control over each corner. Supports the elliptical X/Y syntax for organic blob shapes.

Runs in your browserNo sign-up, no pop-upsNo login requiredFree forever

Works offline once loaded

border-radius: 20px 20px 20px 20px;

Unified (all corners equal)Elliptical (X / Y syntax)

Unit

Color:

Width (192px)

Height (192px)

All corners (20px)

Common uses

Organic Blob ShapesUse the elliptical X/Y syntax to create unique blob shapes for hero sections and illustrations.
Card and Container CornersStandard rounded corners for cards, containers, and panels in modern UI design.
Avatar & Profile Picture ShapesCreate the right corner style for profile pictures: circular, squircle, or rounded square.
Pills, Tags, and BadgesBuild perfectly rounded pill buttons, tags, and badges with the 9999 preset.
Asymmetric Corner DesignsMix radii across corners to create distinctive, brand-recognizable card and button shapes.

How It Works

The border-radius generator runs entirely in the browser — there is no server, no library, and no upload. It builds the CSS border-radius value string directly in JavaScript using React state and useMemo, then applies it as an inline style on a live div element so the browser's own CSS engine renders the shape in real time.

1
Sliders write state
Each range input writes to one of eight numeric state variables — four horizontal corner radii and four vertical ones for elliptical mode. Unified mode collapses all eight into a single slider via a setAll helper that synchronises every value at once.
2
useMemo assembles the CSS value
A useMemo hook recomputes the border-radius string whenever any corner value, unit (px or %), or elliptical toggle changes. In standard mode it produces the four-value shorthand; with elliptical on, it adds the slash separator for the full eight-value syntax — e.g. 32px 20px 20px 32px / 20px 32px 20px 32px.
3
Browser CSS engine renders the preview
The computed string is set as an inline borderRadius style on a plain div element. The browser's layout engine does all the rendering — there is no canvas, no SVG, and no third-party drawing code.
4
Clipboard API copies the output
Clicking Copy calls navigator.clipboard.writeText with either the CSS declaration (border-radius: ...;) or the equivalent Tailwind arbitrary-value class (rounded-[...]), depending on the selected format toggle.

Related Tools

🎨

CSS Box Shadow Generator

Visual builder for CSS box-shadow with live preview, multi-layer stacking, color picker, inset toggle, and one-click copy. Includes Material, neumorphism, and glow presets.

Try it

🟦