Is it possible to apply CSS3Pie border radius to jQuery UI globally?

Question

To apply behavior: url(PIE.htc); to all css files in the project seams to be very long story and with each new version i need to repeat it again.

Is there jquery ui CSS3Pie versions i can find somewhere?

OR

Is it possible to add CSS3Pie support in separate css file, so in such case it will be possible to use that css for any new jquery ui version.

I am trying to do such fix for jquery UI that in my custom css:

.ui-corner-top, .ui-corner-left, .ui-corner-right, .ui-corner-bottom { behavior: url("PIE.htc"); }
.ui-corner-all, .ui-corner-tl, .ui-corner-tr, .ui-corner-bl, .ui-corner-br { behavior: url("PIE.htc"); }

But it is not working.

At the same time such fix working for my styles, for example if a have style

.mystyle
{
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border: solid 2px #36405c;
}

Than i could define this and it will be working:

.mystyle
{
  behavior: url("PIE.htc"); /*it will be working*/
}

So i am assuming that it is not working in jquery UI case because jquery UI has multiple places with .ui-corner-* declarations with different radiuses.

Anyway is it possible to do something with that?

Any ideas someone?

Answer 1

You could create your own theme with http://jqueryui.com/themeroller/, set all the border-radius to 0 and then apply your styles to ".ui-corner-all"