Rounded Corners / Border Radius, css3 and IE versions below IE9

As most people will know IE9,  and all the popular none IE browsers do now support the css3 rounded corners property, (border-radius). But as IE9 will not be available for the XP operating system, support for the older IE browsers will likely remain a problem for a number of years to come.

The simplest solution if possible is to allow the older IE browsers, (and this means anyone using IE on the XP OS) to 'gracefully degrade', or simply stated: 'no rounded corners for IE on the XP OS', and to add to the problem the latest mobile version of the widows os, "Windows 7 mobile" uses the IE7 browser, (with bits of IE8 added on, commonly referred to as IE7.5) although IE9 will be available for the Windows 7 mobile at some time in the future, see http://blogs.msdn.com/b/ie/archive/2011/02/14/ie9-on-windows-phone.aspx.

This however does not help if you have a client that insists on cross-browser rounded corners, and/or you wish to develop a site that also 'looks the same' on all modern handheld devices.

The css3 rounded corners / border radius property -

I will not go deep into this as these are very well documented and are part of the css3 Border Module specs at - http://www.w3.org/TR/2002/WD-css3-border-20021107/.

At its simplest the border radius is specified using -

border-radius: 100px 50px 150px 50px;

The values given above are for all the radius properties being, top-right, top-left, bottom-right, bottom-left, (best remembered as, clockwise from top-left).

The values can also be specified individually if required using -

border-top-left-radius : Radius_value;

border-top-right-radius : Radius_value;

border-bottom-right-radius : Radius_value;

border-bottom-left-radius : Radius_value;

It is currently necessary to use the vendor prefix for the Safari/Chrome and Firefox/Mozilla browsers in order to maintain backwards compatibility, the vendor prefixes would be -

 -moz-border-radius: 10px; // Border radius with vendor prefix for Firefox and Mozilla browsers.

 -webkit-border-radius: 10px; // As above, but for Safari and Chrome browsers.

The Opera browser, (including the latest Opera Mobile browser) and IE9 do not require any vendor prefix.

Note: - As indicated above if ALL border radius values are the same, one can simply state the first value and this will then also be applied to the remaining radius values.

Any radius requiring a vendor prefix should also be stated before the standard, (none prefixed) value.

Current border-radius usage -

So what about 'older' IE version, (IE < 9)?

First- Using a combination of divs and images to produce the effect of rounded corners should now be avoided, not only does this method require excessive mark-up in order to achieve the desired result, it is also unnecessary for all the modern browsers that support the css3 border radius property, and let us be honest here, that would mean that an estimated 80%+ of browsers will no longer require the extra mark-up in a years time, (2012).

The alternatives -

Use an htc file in order to 'enable' rounded corners.

This is the preferred method for simple layouts as it 'enables' the older versions of IE to render rounded corners without the use of IECC's, (IE Conditional Comments) as the file 'contents' will be ignored by IE9. I would however advise the use of IECC's when using this or any other method as not only does it enable one to 'isolate' any pre IE9 specific code. but removes the limitation of having to apply a single border-radius value to all the corners. (see note below).

If using an htc file ensure it is loaded before any usage in your css file.

For examples and description of using this method, see - http://cookbooks.adobe.com/post_Cross_Browser_CSS3_Rounded_Corners-16638.html /  http://css3pie.com/ / http://fetchak.com/ie-css3/

Note added, 4th August 2011 - The most populat htc file at the moment is css3pie, as it also uses IEFilters to simulate support for other css3 properties. Using an htc file will also not affect the standard w3c usage in IE9 or later as the new versions of IE, (9 & 10) no longer recognize the htc file extension so they will not load and implement any htc file.

The results obtained using an htc file will vary, and not all htc files are the same.

Note: When using either of the above htc files, the border radius can only be applied to ALL 4 corners -

e.g. - border-radius: 10px;

Alternatively, if one is using the jQuery framework, there are a number of plug-ins for jQuery that can also 'enable' one to apply rounded corners individualy, the usage of these plug-ins will however require the use of IECC's in order to 'hide' them from the browsers that use the css3 property.

Examples are -

http://plugins.jquery.com/project/corners

http://plugins.jquery.com/plugin-tags/round-corners

My personal recommendation for jQuery would be - http://jquery.malsup.com/corner/ as not only is it relatively simple to implement, but the latest version does not interfere with native browser support for border-radius, something that cannot be said for many rounded corner plug-ins.

The drawbacks -

HTC files and many of the framework plug-ins rely on the use of vml, (vector mark-up language) to render the rounded corner, and this has its limitations. Not least being that any corner radius below 3px will often not render correctly, (if at all).

Additional files must also be downloaded to the users computer for both of these methods, and in the case of the jQuery alternative not only is the plug-in required but the jQuery framework as well. However if you intend to use jQuery for other items, (menu, accordion, lightbox) then this would be my preferred method, not only are the jQuery plug-ins more stable, they also work better than the htc method for more complex layouts.

Summing Up -

The use of rounded corners should not be an 'after thought', especially when it is required to support older versions of IE.

If one must support the older versions of IE ensure that the design is tested in these browsers at all stages of production, and do not forget to check any functionality in these browsers as it is possible for such fixes to have an adverse effect on other uses of javascript, this can include menus that rely on javascript and flv's/swf's.

Should you have any questions or problems using rounded corners / border radius, then please post them to the Dreamweaver community forum at - http://forums.adobe.com/community/dreamweaver/dreamweaver_general?view=discussions, were there are many users willing to help.

Important: Although it is possible to use rounded corners / border radius with table based designs, it is definitely NOT recommended. So any attempt to do so will likely leave you searching for a solution yourself.