All tools

Border Radius Generator

Visual designer for CSS rounded corners.

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

  1. Drag the sliders to shape the corners.
  2. Toggle 'Same on all corners' for asymmetric shapes.
  3. 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.