What is the CSS border-radius property?

border-radius sets rounded corners on an element. You can specify one value for all corners, two values for top-left/bottom-right and top-right/bottom-left pairs, or four individual corner values. The fancy 8-value syntax (X / Y) lets you set separate horizontal and vertical radii per corner to create elliptical arcs.

What is Fancy Mode and when should I use it?

Fancy Mode unlocks the 8-value border-radius syntax: tlX trX brX blX / tlY trY brY blY. Each corner gets an independent horizontal (X) and vertical (Y) radius expressed as a percentage. Use it to create organic blob shapes, leaf silhouettes, or other asymmetric rounded forms that the standard 4-value syntax cannot produce.

What is the difference between px and % units?

px values are absolute — a 50px radius stays 50px regardless of element size, making it predictable for fixed-size UI components. % values are relative to the element dimensions — 50% on a square creates a perfect circle. The % range is capped at 50% because values above 50% collapse to 50% in CSS.

How do the Leaf and Blob presets work?

Leaf and Blob are Fancy Mode presets that use the 8-value syntax with asymmetric per-corner radii expressed as percentages. Leaf uses radii of 0/50, 50/0, 0/50, and 50/0 across corners to create a pointed leaf silhouette. Blob uses radii of 30/70, 70/30, 30/70, and 70/30 to produce an organic blob shape.

What does linking corners do?

When corners are linked (Lock icon active), adjusting any one corner updates all four corners simultaneously to the same value. Unlinking (Unlock icon) lets you control each corner independently for asymmetric designs.

When does the Tailwind equivalent appear?

The Tailwind class badge appears only when all four corners have the same value and the unit is px. It maps common pixel values to Tailwind classes: 0→rounded-none, 2→rounded-sm, 4→rounded, 6→rounded-md, 8→rounded-lg, 12→rounded-xl, 16→rounded-2xl, 24→rounded-3xl, 999→rounded-full.

Is my data sent to any server?

No. The CSS Border Radius Generator runs entirely in your browser. No data is sent to any server, and no account or signup is required.

Can I use the generated CSS directly in production?

Yes. The output is standard CSS border-radius syntax supported by all modern browsers. Copy the generated declaration and paste it directly into your stylesheet, CSS-in-JS, or inline style attribute.

CSS Border Radius Generator

Visual border-radius generator with presets and live preview

Updated Mar 2026100% Private — runs in browser

Corner Controls

Top Left

Top Right

Bottom Right

Bottom Left

Live Preview

Preview color

#6366f1

CSS Output

border-radius: 8px;

Tailwind equivalent:rounded-lg