What is a Border Radius Generator?

A border radius generator lets you visually design CSS border-radius values with live preview — from simple rounded corners to complex organic blob shapes. Copy the generated CSS directly into your stylesheet.

Basic vs. Fancy Mode

• Basic Mode — controls all four corners independently using px or %. Ideal for buttons, cards, avatars, and pills.
• Fancy Mode (8 values) — the CSS border-radius: X / Y slash syntax independently controls horizontal and vertical radii per corner, enabling elliptical curves and organic blob shapes.

Common Use Cases

• 50% on a square — creates a perfect circle (profile avatar, icon button).
• 999px — pill / capsule shape for tags, badges, and buttons.
• Asymmetric values — soft card edges where one side is sharper than the other.
• Blob shapes — Fancy mode with organic percentages for hero section decorations.

How to Use This Tool

1. Choose Basic or Fancy mode.
2. Drag the sliders to adjust corner values (or choose a preset).
3. The preview box updates live as you drag.
4. Click Copy CSS to copy the border-radius declaration.

Is My Data Sent to a Server?

No — everything runs in your browser. No data is sent anywhere.