CSS Border Radius Generator

How to use the css border radius generator

1. Adjust the controls and watch the preview update.
2. Read the generated CSS below the controls.
3. Copy it into your stylesheet.

About this tool

border-radius accepts up to four values, one per corner, starting top-left and going clockwise. Setting all four equal gives the familiar rounded box; setting them differently is how you get a leaf, a speech bubble or an asymmetric card.

A radius of 50% on every corner makes a circle when the element is square, and an ellipse when it is not — that is the usual way to make a round avatar without cropping the image.

Radii are clamped: if two adjacent radii add up to more than the side they share, the browser scales all of them down proportionally, so an enormous radius on a small box quietly becomes a pill rather than overlapping.

Common uses

• Matching a card radius across a design system.
• Making pill-shaped buttons and tags.
• Building an asymmetric shape like a chat bubble.

Frequently asked questions

How do I make a perfect circle?

Set every corner to 50% on an element with equal width and height. On a non-square element the same value gives an ellipse.

What is a pill shape?

Any radius at least half the element's height — 999px is the common shortcut, since the browser clamps it down to exactly half.

Does the radius clip the content?

It clips backgrounds and borders. Child content is only clipped if you also set overflow: hidden.