ShimSearch

Border Radius Generator

Four corners, one line of CSS.

Unit

Four corners, one line of CSS.

How to use it

  1. Set each corner. All four the same gives a single value in the CSS.
  2. Pick the unit. Pixels are fixed. Percentages are of the box, so they change as it resizes.
  3. Copy the CSS. Written the way you would write it by hand.

When you would use this

Rounding corners is one line of CSS and there are still two things about it worth knowing, which is why a preview helps. The first is the order. Four values run clockwise from the top left, the same order as padding and margin, and getting it wrong produces a shape that is subtly not what you drew. All four equal collapses to a single value, which is what this writes when your corners match. The second is percentages. A percentage radius is not one number, it is a horizontal radius measured against the width and a vertical one measured against the height. On a rectangle that gives an ellipse, and a preview that draws a circle is lying to you about what your stylesheet will do. This one draws the ellipse. Above 50 percent nothing changes, because adjacent curves already meet and CSS scales everything down proportionally to fit. Rather than accept a number that does nothing, the tool says so.

Questions

Why is 50 percent an ellipse and not a circle?
Because a percentage radius resolves against each axis separately: the horizontal part is a percentage of the width and the vertical part is a percentage of the height. On a box that is not square that produces an ellipse, and the preview here shows that rather than drawing a circle you will not get.
What order are the four values in?
Clockwise from the top left: top left, top right, bottom right, bottom left. It is the same order as padding and margin shorthand, which is worth remembering because it catches people out constantly.
Why can I not go above 50 percent?
Because nothing happens above it. At 50 percent the curves from adjacent corners already meet, and CSS scales all the radii down proportionally to fit rather than letting them overlap.