CSS border-radius Property

The border-radius property controls the curvature of an element’s corners, allowing designers to soften rectangular boxes into rounded rectangles, pills or circles. By defining radii for corners, it changes the shape used for the box’s border and background painting without altering the document flow or box model (the element keeps its original width/height and layout slot). It supports both uniform rounding for all corners and independent control per corner, and can create elliptical curves by specifying different horizontal and vertical radii for a corner.

Because the rounded shape affects how the element is painted and how its edges appear, border-radius interacts closely with other visual properties. For example, shadows and focus glows typically follow the rounded outline when applied with box-shadow, borders draw along the curved edge (see border), and the element’s background can either be clipped to the rounded area or extend underneath depending on the painting rules controlled by background-clip. If you want inner content clipped to the rounded corners so child elements or overflowing content don’t spill outside, combine rounded corners with an appropriate overflow setting.

Beyond simple rounding, border-radius is a useful tool for shaping UI components. Large equal radii on square elements produce circles (commonly used for avatars), while asymmetric radii yield more organic shapes for cards or controls. For complex or non-rectangular shapes you can use clipping techniques in concert with rounding - for instance, pairing rounded corners with clip-path lets you create intricate silhouettes that go beyond what radii alone can produce. In practical use, keep accessibility and contrast in mind: rounded corners change the visual weight of controls and may affect the appearance of focus indicators, so ensure focus styles remain clearly visible when corners are rounded (often implemented using box-shadow or contrasting borders).