CSS Border Radius Generator — Per-Corner & Organic Blob

Guide

About Border Radius Generator

Build CSS border-radius visually. Per-corner sliders for symmetric rounding, plus an organic blob mode using the 8-value <code>border-radius</code> syntax for soft asymmetric shapes. Live preview at any size, copy CSS or Tailwind class.

What border-radius can express

Far more than rounded squares. The 8-value form lets you draw any rounded shape that fits inside the element box. Combined with overflow: hidden, you can mask images and content into organic shapes — no SVG, no clip-path, just CSS.

The shapes you actually use

Shape	CSS
Slight rounding	`border-radius: 4px`
Card	`border-radius: 8px`
Pill	`border-radius: 9999px`
Circle (square parent)	`border-radius: 50%`
Squircle (square parent)	`border-radius: 30%`
Soft blob	`border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%`
Hard pill (rectangle)	`border-radius: 9999px`

Common workflows

Design system token. Build a 4 / 8 / 12 / 16 / 9999 ladder. Use the same values everywhere — consistent rounding ties UI together.

Avatar shape variation. Pure circle is conservative; squircle is friendly; blob is playful. Pick by brand voice.

Soft card backgrounds. Hero sections often use a single oversized blob shape with a tinted background. The 8-value syntax draws it in one rule.

Image masks. border-radius on an image with object-fit: cover is the cheapest way to get a rounded photograph crop.

Why the visual builder helps

Border-radius numbers do not map intuitively to shape. 30% / 70% and 60% / 40% produce visually different results that you cannot guess without seeing them. Sliding the values gives the answer immediately.

Frequently asked questions

What is the 8-value syntax?

border-radius: a b c d / e f g h sets horizontal radii separately from vertical. Different ratios on each corner make organic blob shapes that pure circles cannot reach.

When do I use percent vs pixels?

Pixels for fixed corner sizes (cards, buttons). Percent for proportional shapes — 50% on a square gives a circle; less than 50% gives a rounded square.

Tailwind support?

Yes. Common shapes map to rounded-md, rounded-lg, rounded-xl, rounded-full. Custom values use the arbitrary rounded-[...] syntax.

How do I make a pill shape?

border-radius: 9999px on a non-square element. The large radius clamps to the element's smaller dimension, producing perfectly rounded ends.

Why blob shapes?

Modern design uses asymmetric soft shapes for backgrounds, avatars, and decorative accents. The 8-value syntax produces these without SVG.

Cropping content?

Yes — overflow: hidden + border-radius crops child content to the rounded shape. Used for image cards and avatars.

Related tools

Last updated: 2025-01-15