Post Detail

May 14, 2012 in css

Rounded Corners on Boxes – CSS Effects

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:

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.

By browsing this website, you agree to our privacy policy.
I Agree