CSS Border Radius Generator

It sets the personality of an interface. Four to eight pixels reads as neutral and professional, twelve to sixteen as friendly and modern, and a fully rounded pill as playful. What matters most is consistency — pick a small set of values and apply them across every component.

Set border-radius to 50% on an element with equal width and height. Using a percentage rather than a fixed pixel value keeps it circular at any size, which is why avatars and icon buttons use it — a hard-coded radius breaks the moment the element changes dimensions.

It sets horizontal and vertical radii separately, producing elliptical rather than circular corners. It is how you create the softly squashed corners seen in some design systems, and with all four corners specified independently it can generate organic blob shapes.

Yes, CSS Border Radius Generator is completely free. No signup, no account, and no watermark on outputs. A Pro tier is available for 100 AI ops/day and larger file sizes.

CSS Border Radius Generator runs entirely in your browser. Your file is never uploaded — it is read, processed and saved locally, so it never reaches our servers or anyone else's. You can disconnect from the internet after the page loads and it still works.