BorderRadius

Borderradius, commonly written as border-radius in CSS, is a property used to round the corners of an element’s border box. It can produce anything from subtle rounding to full circular shapes, depending on the values and the element’s dimensions.

Value formats and examples

- A single value applies the same radius to all corners: border-radius: 8px.

- Two values alternate radii for opposite corners: border-radius: 8px 16px.

- Three values apply a pattern to the corners in clockwise order: border-radius: 8px 16px 24px.

- Four values set each corner individually in clockwise order: border-radius: 8px 16px 24px 32px.

- Percent values are allowed, which can yield proportional rounding relative to the element’s size (e.g., 50% can create circular shapes if height equals width).

- Elliptical radii can be specified with a slash, separating horizontal and vertical radii: border-radius: 10px 20px / 5px 15px.

Elliptical radii

Using the slash form, the first list defines horizontal radii and the second list defines vertical radii for the corners. This allows non‑uniform or elliptical rounding, producing shapes that are not perfect circles.

Effects and behavior

Border-radius rounds the outer corners of the element’s border box and affects the element’s background and borders accordingly. Content inside the element may appear to extend into the rounded area; to clip content to the rounded edge, you can use overflow: hidden.

Compatibility and usage

Border-radius is a standard CSS feature supported in all major browsers. It is widely used for UI elements such as buttons, cards, avatars, and other components to create visually softened edges and responsive shapes.