CSS Border Radius Generator – Create Custom Shapes

What Is a CSS Border Radius Generator?

A CSS border-radius generator lets you create rounded corner values visually without writing code by hand. Adjust sliders for each corner, choose a unit (px or %), preview the result in real time, and copy the CSS or Tailwind class instantly.

Common Shapes You Can Create

• Circle: border-radius: 50% on a square element
• Pill / Stadium: border-radius: 9999px on any rectangular element
• Squircle: ~30% on all corners — used in iOS app icons
• Blob / Organic: different values on each corner for a natural, flowing shape
• Rounded rectangle: small equal values like 8px or 16px

Using the px vs % Unit

Pixel values give a fixed curve size regardless of the element dimensions. Percentage values scale with the element — 50% on all four corners always creates a circle or ellipse. Use px for cards and buttons where you want a consistent look at any size, and % for shapes that should scale with the element.

Frequently Asked Questions