Border Radius Generator

Visual designer for CSS rounded corners.

Same on all corners

All corners (20px)

CSS

border-radius: 20px 20px 20px 20px;

About

Slide each corner independently or together. See the shape live. Copy the CSS and paste it into your project. Useful for designing chips, buttons, asymmetric cards, and pill shapes.

How to use

Drag the sliders to shape the corners.
Toggle 'Same on all corners' for asymmetric shapes.
Copy the CSS line.

FAQ

What's the max radius I should use?+

Half of the smaller side gives you a perfect pill or circle. Going higher does nothing visually.