Border Radius Generator – Design Rounded Corners & Copy CSS

Rounded corners are a quiet cornerstone of friendly interface design, and CSS border-radius is far more powerful than ’round the corners a bit’: each corner can take two values (horizontal and vertical), which is how designers create leaf shapes, eggs, blobs and the organic ‘squircle-ish’ curves modern brands love. Guessing those eight numbers is miserable, so this generator is visual: sliders for each corner’s radius with a live shape preview, a uniform mode for classic even rounding, and a blob mode using the full eight-value syntax. When the shape feels right, copy the border-radius CSS — with the -webkit- line included for older engines if you want it.

Quick Answer: Drag corner sliders to shape the rounding — uniform cards or wild organic blobs — preview live and copy the border-radius CSS.

Free Online Tool

CSS Border Radius Generator

From polite card corners to full organic blob.

Mode

Radius: 24px

Your CSS

How to Use the CSS Border Radius Generator

Choose a mode: Uniform for one radius on all corners, Per-corner for individual control, or Blob for organic eight-value shapes.
Drag the sliders and watch the shape update in the preview.
For blobs, vary the horizontal and vertical values unevenly — asymmetry is what makes it organic.
Check the shape at the size you will actually use it; radii behave differently at small sizes.
Copy the CSS into your stylesheet.

Key Features

Uniform, per-corner and full blob (eight-value) radius modes.
Live shape preview that updates with every slider move.
Percentage and pixel thinking supported via the value display.
Copy-ready CSS with optional legacy -webkit- prefix line.
The fastest way to prototype avatars, cards, buttons and hero blobs.

Best Practices and Tips

A radius of 50% on a square makes a circle; on a rectangle, an ellipse — the same rule builds pills from rectangles when height is fixed.
Blob shapes look best when opposite corners echo each other loosely rather than matching exactly.
For image masks, apply the radius to a wrapper with overflow hidden so the image itself follows the shape.
Keep a small set of radii in your design system (4, 8, 16, full) — consistency reads as intentionality.
Buttons feel friendlier as their radius approaches half their height (the pill) — try it against your square-corner version.

Common Mistakes to Avoid

Rounding every element differently across a page, which dissolves the design system into noise.
Using huge px values expecting a pill on a tall element — percentage or a capped value behaves more predictably.
Forgetting overflow: a rounded parent does not clip a square child image without overflow hidden.
Blob shapes behind text: mesmerising, and usually unreadable — blobs are for decoration and image frames.

Frequently Asked Questions

What does the eight-value syntax mean?

In the full syntax, values before the slash are the horizontal radii of the four corners (top-left, top-right, bottom-right, bottom-left) and values after the slash are their vertical radii. Different horizontal and vertical values per corner is what bends a box into leaves and blobs.

How do I make a perfect circle or pill?

Circle: a square element with border-radius: 50%. Pill: any rectangle with border-radius set to at least half its height (for example 999px as a convenient oversized value, or 50% of height via a fixed figure). The generator’s uniform mode plus 50% gets you both.

Percentages or pixels — which should I use?

Percentages scale with the element, so shapes survive responsive resizing — ideal for blobs and image frames. Pixels give absolute, design-system corners on cards and buttons that should stay identical at any size. Match the choice to the element’s job.

Do all browsers support the blob syntax?

Yes — the full eight-value border-radius syntax has been universally supported for many years. The optional -webkit- line in the output is a belt-and-braces inclusion for very old engines and can be omitted for modern projects.

Can I round just one or two corners?

That is what per-corner mode is for: tabs use top corners only, chat bubbles often round three corners and keep one sharp, and diagonal treatments use two opposite corners. Set the unwanted corners to zero.