Achieving Rounded Corners in Internet Explorer for jQuery UI with DD_roundies
April 2020 note: Hi! Just a quick note to say that this post is pretty old, and might contain outdated advice or links. We're keeping it online, but recommend that you check newer posts to see if there's a better approach.
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?
Permalink to '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
Permalink to '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
Permalink to '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
Permalink to '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?
Permalink to '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!