border-radius rounds the corners of an element. It looks simple, but it can draw circles, pills, leaves and soft blobs with no images at all.

The shorthand order

Values go clockwise from the top left: top-left, top-right, bottom-right, bottom-left.

  • One value: all four corners. border-radius: 12px;
  • Two values: top-left and bottom-right, then top-right and bottom-left. border-radius: 0 24px;
  • Three values: top-left, then top-right and bottom-left together, then bottom-right.
  • Four values: each corner separately. border-radius: 24px 24px 0 0; makes a tab.

The generator writes the shortest form that means the same thing.

Common shapes

  • Circle: a square element with border-radius: 50%. On a non-square element, the same value gives an ellipse.
  • Pill: a very large pixel value such as 999px. The browser reduces it so the ends are perfect half-circles, whatever the height.
  • Tab: round only the top two corners.
  • Leaf: 0 80px rounds two opposite corners.

The slash syntax for blobs

Each corner is really an ellipse with a horizontal and a vertical radius. A slash separates the two sets:

border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%;

Different horizontal and vertical values give organic, uneven shapes. Turn on the "elliptical" option in the tool to edit both radii for each corner. Animating between two such values can make a gently morphing blob.

Which unit?

  • px: a fixed curve, the same on any size of box.
  • %: relative to the box, so the curve scales with it. Needed for circles and blobs.
  • rem: scales with the user's font size, which suits buttons and chips.

Tips

  • Nested rounded boxes look best when the inner radius equals the outer radius minus the padding between them.
  • overflow: hidden on the rounded parent clips child images to the curve.
  • Very large radii on small elements simply cap at the maximum, so 999px is safe.