CSS Border Radius Generator

border-radius takes up to four values, one per corner, starting top-left and going clockwise. One value rounds all four equally, which covers most of what anyone needs.

Pixels stay fixed; percentages follow the box. A 16px radius is 16px whatever the card's size. A 50% radius is half the width horizontally and half the height vertically, so it turns any rectangle into an ellipse and keeps doing so as the element resizes.

The form most generators leave out is the slash. border-radius: 40% 60% 55% 45% / 45% 35% 65% 55% gives every corner a different horizontal and vertical radius. Each corner becomes a quarter-ellipse rather than a quarter-circle, and the result is the soft organic blob shape used all over modern landing pages. There is no other way to produce it in CSS.

When a radius is too large to fit — two adjacent corners asking for more than the side is long — the browser scales all of them down proportionally rather than clipping. That is why a very large radius on a short element quietly becomes a pill.

Press "Make a blob". That is the elliptical form with eight different percentages. Change one number and watch a single corner deform. Give the element a gradient background and you have the decorative shape that would otherwise be an SVG — except this one scales, animates, and costs nothing to download.

Nested corners have a rule. When a rounded element sits inside another with padding, the inner radius should be the outer radius minus the padding. An 8px padding inside a 16px card means the inner element wants 8px, not 16px. Match them and the gap between the two curves goes visibly wrong. This is the detail that separates interfaces that look right from ones that look almost right.

A pill is not 999px, conceptually. It is "as round as possible", and 999px is the idiom that expresses it. The browser clamps it to half the height, so the button stays a pill at any size without you tracking the number.

One radius, used everywhere. Pick one value for cards, one for inputs and buttons, and one for small chips — and never deviate. Mixed radii are the fastest way to make a considered interface look assembled from parts.

The corner is one half of a card's physicality; the other is the shadow.