Achieving Rounded Corners in Internet Explorer for jQuery UI with DD_roundies

jQuery UI is built upon a powerful CSS Framework, including round corners that utilize CSS3’s border-radius property. Unfortunately, CSS3 border-radius is only supported by Safari and Firefox, leaving browsers such as Internet Explorer to gracefully degrade to square corners. In many cases this is an acceptable fallback, but for those websites that really need to look “just right” in all major browsers, a workaround is needed. We recently experimented with the DD_roundies library and found it to be a promising solution to this problem.

A Quick Disclaimer: Let us point out that this is not an official jQuery UI recommended approach. Despite our status as jQuery UI team members, this particular technique is not endorsed by the project and is merely something we found interesting.

What is DD_roundies?

DD_roundies is a javascript library authored by Drew Diller which offers a new approach to bringing rounded corners to Internet Explorer (a browser notorious for its CSS shortcomings). DD_roundies uses IE’s proprietary VML drawing language to create small images representing each corner of an element to be rounded. The script is smart enough to figure out quite a lot about its environment, such as element dimensions, border appearance and even background image and color, and uses all of this information to draw and position each VML image to appear seamlessly integrated in an interface.

Applying DD_roundies to jQuery UI

Since the round corners in jQuery UI’s new CSS Framework do not apply to Internet Explorer, we thought DD_roundies might offer a decent workaround. We downloaded a fresh copy of a demo page from jQuery UI ThemeRoller and also grabbed a copy of the DD_roundies source code and linked it to the demo.html page. Since DD_roundies works with selectors - much like jQuery - it is quite easy to apply it to elements on a page. For example, the following code would apply an 8px corner radius on all 4 corners of all elements with a class of myContainer:

DD_roundies.addRule('.myContainer', '8px');

The second argument of DD_roundies’ addRule method allows for CSS-like values for each corner as well, for instance, you could apply a different radius to each corner by passing values in “TL TR BR BL” order ( '8px 10px 5px 3px' ). This capability allows for a very convenient mapping to jQuery UI’s CSS Framework classes, and allows us to apply DD_roundies to jQuery UI in a few short lines, like so:

DD_roundies.addRule('.ui-corner-all', '8px');
DD_roundies.addRule('.ui-corner-top', '8px 8px 0 0');
DD_roundies.addRule('.ui-corner-bottom', '0 0 8px 8px');
DD_roundies.addRule('.ui-corner-right', '0 8px 8px 0');
DD_roundies.addRule('.ui-corner-left', '8px 0 0 8px');
DD_roundies.addRule('.ui-corner-tl', '8px 0 0 0');
DD_roundies.addRule('.ui-corner-tr', '0 8px 0 0');
DD_roundies.addRule('.ui-corner-br', '0 0 8px 0');
DD_roundies.addRule('.ui-corner-bl', '0 0 0 8px');

…or in a more convenient jQuery function where the corner radius is passed as an argument:

$.uicornerfix = function(r){
  DD_roundies.addRule('.ui-corner-all', r);
  DD_roundies.addRule('.ui-corner-top', r+' '+r+' 0 0');
  DD_roundies.addRule('.ui-corner-bottom', '0 0 '+r+' '+r);
  DD_roundies.addRule('.ui-corner-right', '0 '+r+' '+r+' 0');
  DD_roundies.addRule('.ui-corner-left', r+' 0 0 '+r);
  DD_roundies.addRule('.ui-corner-tl', r+' 0 0 0');
  DD_roundies.addRule('.ui-corner-tr', '0 '+r+' 0 0');
  DD_roundies.addRule('.ui-corner-br', '0 0 '+r+' 0');
  DD_roundies.addRule('.ui-corner-bl', '0 0 0 '+r);
};

With the function above included, we can now call the following code to apply a corner radius to the jQuery UI CSS Framework like this:

$.uicornerfix('6px');

Note: DD_roundies waits for DOM readiness on its own, so you don’t need to wait for DOM ready to call the function.

The Result

To see the effect of DD_roundies, view the following demo page in Internet Explorer:

Demo Page: DD_roundies applied to jQuery UI

As you can see, it’s not perfect. It seems to mess with some of the jQuery UI widget padding here and there, but overall we’re quite impressed with how well it handles the appearance. It even works with some of the hover states, such as the arrows in the datepicker. Obviously, this is not production-ready, but we think it’s pretty neat nonetheless.

Anyone Care to Run with This?

Since the new framework classes are very easy to find and manipulate using javascript, you could approach this problem with a number of corner-rounding libraries. We would love to hear your ideas for either fine-tuning this approach or an entirely different approach to the problem. If you have ideas, let us know!

Download Demo Zip File

All blog posts