Introducing Border Radius Generator

Border Radius Generator is now live on Tools.Town — a visual tool to design CSS border-radius values from simple rounded corners to complex blob shapes, with a live preview and instant CSS output.

Stop guessing values in DevTools. See the shape change in real time, then copy the CSS.

What Does It Do?

Uniform Radius

Apply the same radius to all four corners at once. Perfect for cards, buttons, and standard UI components.

Per-Corner

Control each corner independently — top-left, top-right, bottom-right, bottom-left — for asymmetric shapes.

Blob / Organic

Set both horizontal and vertical radii per corner to create smooth, organic blob shapes for hero illustrations.

The generator outputs both the shorthand border-radius property and the full longhand, so you can use whichever fits your codebase.

How It Works

Drag the sliders

Eight control points — one horizontal and one vertical radius per corner. Drag to sculpt the shape.

→

See it live

The preview box updates instantly with every drag, showing exactly how the shape will look.

→

Copy the CSS

Hit Copy CSS to get the complete border-radius rule, ready to paste into your stylesheet.

Why We Built It

CSS border-radius has a deceptively deep syntax. The shorthand covers most cases, but elliptical radii (the / syntax) and per-corner control open up a huge design space that’s nearly impossible to explore by hand. This tool makes the full spectrum of border-radius shapes discoverable visually — no docs required.

Try It Now

Free Tool

No sign-up In-browser

Border Radius Generator

Design CSS border-radius values visually — from rounded corners to organic blobs. Live preview, instant CSS copy.

Uniform & per-cornerBlob shapesLive previewCopy CSS

Design Shapes

Check out the full design tools collection — CSS Gradient Generator, Box Shadow Generator, and more.

Frequently Asked Questions

What's the difference between shorthand and longhand border-radius?

Shorthand sets all four corners at once (e.g. border-radius: 12px). Longhand lets you set each corner independently using border-top-left-radius etc., or using the / syntax for elliptical corners.

Can I create blob shapes?

Yes. Set different values for each of the eight control points (horizontal and vertical radius per corner) to create organic blob shapes.

Does the output work in all modern browsers?

Yes. The generated CSS uses standard border-radius syntax supported by all modern browsers.

AI Text Summarizer

Go Premium

Introducing Border Radius Generator — Now Live on Tools.Town