CSS Border Radius Generator

Dial in CSS rounded corners visually — set each corner independently, switch units, and copy clean border-radius CSS.

How to use Border Radius Generator

1. Drag each corner slider (or type a value) to set the radius for Top-Left, Top-Right, Bottom-Right and Bottom-Left.
2. Pick a unit — px, % or em — and optionally enable Link to move all corners together.
3. Turn on Elliptical / organic blob to add a second vertical radius per corner for blob shapes.
4. Click Copy CSS to grab the ready-to-paste border-radius declaration.

What is Border Radius Generator?

FAQ

What is the slash in border-radius syntax?

The slash separates horizontal radii from vertical radii. border-radius: 50px / 20px gives each corner a 50px horizontal and 20px vertical curve, producing an elliptical rounding. With four values on each side you can craft organic blob shapes.

Should I use px or percentages?

Use px for fixed, predictable corners regardless of element size. Use % when you want the rounding to scale with the element — for example, border-radius: 50% on a square makes a perfect circle.

Does this work in all browsers?

Yes. border-radius is supported in every modern browser without a prefix, including the elliptical slash syntax. No vendor prefixes are needed.

Related tools

• Glassmorphism Generator
• CSS Gradient Generator
• Box Shadow Generator
• Color Palette Generator