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

How to Use CSS Border Radius Generator

1
Choose a unit — px (0–200) or % (0–50) — using the unit toggle in the controls bar.
2
Drag the corner sliders or type values directly to set Top Left, Top Right, Bottom Right, and Bottom Left radii.
3
Click the Lock icon to link all corners so they move together; click Unlock to control each corner independently.
4
Click a preset button (None, Card, Large, Circle, Pill, Leaf, Blob) to instantly apply a border-radius style.
5
Toggle Fancy Mode to unlock separate horizontal and vertical radii for each corner using the 8-value CSS syntax.
6
Pick a background color for the live preview box using the color picker to see the shape on your desired hue.
7
Copy the generated CSS with the Copy button — a check icon confirms the clipboard write for 2 seconds.
8
When all four corners are equal and the unit is px, check the Tailwind equivalent badge and copy the utility class.

About CSS Border Radius Generator

Free visual CSS border-radius generator — create rounded corners, circles, pills, organic blobs, and custom shapes with live preview. Drag sliders or type values, pick presets, and copy the CSS instantly. Supports per-corner control and the advanced 8-value syntax.

Key Features

Per-Corner Control: Set each corner independently or lock them together.
Fancy Mode: Separate horizontal and vertical radii for organic, asymmetric shapes.
Presets: One-click presets for Card, Circle, Pill, Leaf, Blob, and more.
Live Preview: See the shape update in real-time with customizable background color.
Instant Copy: Copy the CSS border-radius declaration to your clipboard.

Who Is This For?

Frontend developers styling components, UI designers experimenting with rounded shapes, and anyone who needs quick CSS border-radius values without guessing.

Privacy & Security

Runs 100% in your browser — no signup, no uploads, no data stored.