Border Radius Generator
Visually tune border-radius with per-corner control in px or percentage — nail corners for cards, avatars and pill buttons in one place.
>_ USAGE GUIDE
Tune border-radius visually with per-corner control, in px or percentage, with a live preview. Whether it is a card, an avatar or a pill button, drag a couple of sliders to hit the corner you want, then copy the CSS in one click.
Per-corner control has its own rules. In the shorthand, a slash separates one-to-four values on each side: the front set is the horizontal radii and the back set is the vertical radii, both ordered clockwise as top-left, top-right, bottom-right, bottom-left. To round a single corner, set the others to 0. The px versus percentage difference matters: px is a fixed length that does not change with the element, while a percentage is computed from the element's width and height, giving a more even curve on fluid layouts and producing ellipses. An avatar at 50% becomes a perfect circle, and a pill button usually uses half its height as the radius.
- Pick the unit: decide between px and percentage
- Drag each corner: set the horizontal and vertical radii per corner
- Check the live preview: watch the corners as you adjust
- Copy the CSS: take the
border-radiusinto your element
>_ FAQ
Q1 · What is the argument order for per-corner radii?
The order is clockwise: top-left, top-right, bottom-right, bottom-left. So border-radius: 8px 0 0 8px; gives the first value to the top-left and the fourth to the bottom-left. With a slash, the values before it are horizontal radii and those after are vertical, e.g. border-radius: 10px 20px / 5px 10px;.
Q2 · How does a percentage radius differ from px?
px is a fixed length, so the corner does not change with the element's size; a percentage is computed from the element's width and height, which gives a more even curve in fluid layouts and makes ellipses easy. When width and height differ under a percentage, the horizontal and vertical radii differ too — that is exactly where the ellipse comes from.
Q3 · How do I make a perfect circle or round avatar?
Give the element equal width and height, then set border-radius: 50% (or 50% / 50%) for a perfect circle. To keep an image round without distortion, pair it with object-fit: cover so it is not stretched.
Q4 · How is a pill button radius calculated?
Use half the element's height: a 40px-tall button takes border-radius: 20px;. A larger arbitrary px value approximates it, but exactly half the height keeps both ends as clean semicircles regardless of font size.
Q5 · How do I apply the copied CSS to my element?
Paste the copied border-radius declaration straight into the target element's rule, for example .card { border-radius: 12px; }. If you used per-corner values, keep the shorthand order. In the browser devtools you can drop it in temporarily to preview before writing it back to source.