CSS Border Radius Generator

Values go clockwise from the top-left corner: top-left, top-right, bottom-right, bottom-left. With fewer values the rest are copied: one value sets all corners, two set top-left and bottom-right, then top-right and bottom-left, and three set top-left, the top-right and bottom-left pair, then bottom-right. The tool always writes the shortest form.

It separates horizontal from vertical radii. border-radius: 50% / 30% gives every corner an ellipse that is 50% of the width across and 30% of the height down. Different values per corner on both sides of the slash produce organic blob shapes; turn on “Elliptical corners” to edit them.

For a pill, use a radius larger than half the height, like 9999px: when radii are too big for the box, the browser scales them all down until they fit, which gives perfectly round ends at any size. For a circle, use 50% on an element with equal width and height (aspect-ratio: 1).

Use px or rem for a consistent corner on every card and button whatever its size; rem also scales with the user’s font size. Use % when the curve should be proportional to the element, as for circles and blob shapes. Percentages refer to the width for horizontal radii and the height for vertical ones, so 10% on a wide box gives elliptical corners.

A rounded element inside another rounded element with padding needs a smaller radius: inner radius = outer radius − padding. With the same radius on both, the gap between the curves is thicker at the corners than along the sides.