jQuery UI Tabs - Rounded Tab Corners in IE

Question

I'm trying to switch from AjaxControlToolkit to jQuery UI tabs for a fairly simple tab element. I'm 99% there with CSS and theming, but I'm running into a wall attempting to get rounded corners on the tabs in IE. jQuery UI provides the styles needed for rounded tabs in better browsers, but it might be a deal-breaker if we can't get them in IE.

I would really hate to have to keep using the Toolkit, and would also prefer not to bring in a different plugin to do the tabs (although this is an option).

I tried .htc files, and while it may have easily been my fault, I could not get them to work for me. CurvyCorners threw exceptions until I got tired of it and moved on.

Are there any IE round-corners solutions that we KNOW can get along with jQuery UI tabs, or any workarounds specific to the tabs? I do not need rounded corners anywhere else.

P.S. Tabs can be of different lengths, so using pre-sized background images really isn't an option. Using multiple images, or resized images, would be fine as long as they can support arbitrary tab lengths.

Thanks a lot!

Answer 1

I use this for all my rounded-corners and it works great: http://jquery.malsup.com/corner/.

You can also specify the CSS property border-radius and in browsers that support CSS3 the plugin will recognize that.

Answer 2

May I recommend CSS3Pie as a worthy new entry to the market.

It allows you to make rounded corners in IE using your stylesheet, along with all the other browsers. No more need for all those extra elements on your page or all those jquery plug ins.

Enjoy.