Border Radius

The CSS border-radius property rounds the corners of an element. You can set all four corners equally or control each corner independently.

Pixel values create a fixed rounding regardless of element size. Percentage values are relative to the element dimensions, so 50% on a square creates a perfect circle.

Set border-radius to 50% on a square element (equal width and height). This rounds each corner to half the element size.

Yes, border-radius accepts four values in order: top-left, top-right, bottom-right, bottom-left. This tool lets you control each independently.

A pill (or stadium) shape uses a very large border-radius value (like 9999px) which fully rounds the shorter sides of a rectangle.