What CSS property is used to create rounded corners?

The CSS property used to create rounded corners is border-radius. It applies a curved radius to an element’s border box, allowing buttons, cards, images, panels, and other rectangular components to have softened corners.

The property accepts one to four radius values, such as `border-radius: 12px`, or separate horizontal and vertical radii using slash syntax. Individual corners can also be controlled with properties such as `border-top-left-radius`. A value of `50%` can turn a square into a circle when its width and height match.

A common mix-up is confusing border-radius with outline-radius. CSS outlines sit outside the border and do not have a standard outline-radius property. The radius affects the border and background painting; with `overflow: hidden`, it can also clip child content and images to the same curved shape. The property became widely practical as modern browsers adopted CSS3-era border styling.