Adding rounded corners to an HTML element has traditionally been anything but trivial. Extra markup, bloated scripts, sliced images and other less-than-optimal methods have all at some time been used to achieve rounded corners.

But CSS3’s border-radius property makes those old-school solutions obsolete. Here’s the syntax:

.example{
border-radius: 40px;
}

Including this code will add a 40px radius to each of the corners on the affected element.

The example code above is the shorthand notation, and is the simplest and most common way to use border-radius.