Circle, Pill or Blob: Picking the Right border-radius

A round avatar, a pill-shaped button and a soft blob behind a hero image all come from border-radius, but each needs a different setting. The avatar wants a percentage on a square box. The pill wants a pixel radius of at least half its height. The blob wants eight separate percentages. Using the wrong one is how a button ends up as a flattened egg.

Avatar: 50% on a square box

A percentage radius is measured against the box itself: horizontally against its width, vertically against its height. On a square those are the same number, so 50% on every corner makes each corner a quarter circle that meets the next one, and the result is a circle. That is exactly what the Circle preset in the border-radius generator sets: 50%, linked across all four corners. Larger values do not change it; when two corner radii would add up to more than the side, the browser scales them down together, so 100% on a square is still a circle. The tool's read-out says "A circle on a square box" for any linked percentage of 50 or more, and the qualifier matters: give the avatar an image that is not square, or forget to fix its width and height, and the same value draws an oval.

Pill button: a pixel radius, at least half the height

Here a percentage goes wrong. On a button 180px wide and 44px tall, 50% means 90px across and 22px down at each corner. Those two radii are different, so the ends are elliptical and the top and bottom edges curve all the way along: an ellipse, not a pill. A pill needs both radii equal and the ends fully round, which means a pixel value of at least half the height, here 22px or more. Anything above that is scaled down to fit, so the ends stay half circles and the long edges stay straight.

In the tool, switch Units from % to px in Simple mode, keep the corners linked, and drag the radius up. The preview shows the same value on a card, an avatar and a button at once, and once the value reaches half the preview's height the read-out names the shape a pill. The px slider runs from 0 to 120, enough for any button up to 240px tall. If you prefer the common shortcut of a very large value such as 999px, write it by hand; CSS scales it down the same way, so it also gives a pill at any height.

Background accent: Blob mode's eight numbers

A circle and a pill are symmetric on purpose. A shape behind an illustration usually wants the opposite: enough unevenness that it reads as drawn, not as a primitive. Simple mode cannot do that, because each corner has one radius. Blob mode writes the full form, four horizontal percentages, a slash, four vertical ones, for example 55% 45% 60% 40% / 40% 60% 45% 55%. Because they are percentages of the width and the height, the shape keeps its character when the box resizes. Randomize picks each value around 50; the Smoothness slider sets how far it may wander, from 15 points either side at 0 to 45 at 100, never below 5% or above 95%. You can also drag each corner's handle. The steps are in the how-to guide.

Which unit to reach for

There is no single setting that covers all three, and that is the useful rule. Use a percentage when the shape should follow the box's proportions: a circle on a square, a blob on any box. Use pixels when the curve should stay the same size whatever the box does: a pill, or an ordinary card radius such as this site's own 20px, which the Site cards preset loads. A dense table, a settings list or a row of small icon buttons usually wants a small pixel radius or none, because a strong shape draws the eye to itself.

Open the border-radius generator, set the unit that matches the shape, and check the card, avatar and button previews before you copy the line.