CSS Border Radius Generator

The border-radius property rounds the corners of an element. You can set a single value for all corners or specify each corner individually.

Shorthand: border-radius: top-left top-right bottom-right bottom-left — values go clockwise from the top-left corner.

Units: Use px for fixed rounding, % for proportional rounding (50% on a square creates a circle), em/rem for scalable rounding relative to font size.

Pill shape: Set a very large pixel value (e.g. 9999px) on a rectangular element to create a fully rounded pill shape. This works because the radius is clamped to half the element's dimension.

Elliptical corners: CSS also supports separate horizontal and vertical radii using the border-radius: h-radius / v-radius syntax for asymmetric curves, though this generator focuses on circular (uniform) corners.