Rounded Corners

Tweet

IE didn't recognize rounded corners prior to version 9. In the past rounded corners were only available in mozilla based browsers, such as Firefox, or Opera.

If you wanted to make rounded corners in IE, you needed to create small images, and use a complicated set of dividers to form the area you wanted to make rounded.

Today, with IE 9.x you can create rounded corners with ease. Rounded corners syntax with CCS3 is border-radius. It is easily added, such as properties are to width or position:

.roundElement {
border-radius: 10px;
}

The following statement adds one rounded corner to each of the elements four corners. A specific border element can be added to each element individually using:

.pearElement {
border-top-left-radius: 7px;
border-top-right-radius: 5px;
border-bottom-right-radius: 6px;
border-bottom-left-radius: 8px;
}

I like to use the shorthand notation:

.oddRoundElement {
border-radius: 12px 5px 12px 5px;
/* or */
border-radius: 12px 5px;
}

Since rounded corner elements and border-radius was not standard, each browser implemented their own prefixed {prefix}-border-radius implementation. For more information see, http://davidwalsh.name/css-rounded-corners.