CODEWITHSUNDEEP
jqueryhtmlcss
babb
babb

Reputation: 423

JQUERY UI - Issue with border-radius. IE7 and IE8 doesn't support, need method to round corners

I have the standard template from Jquery UI. for the tabs and accordion etc, it uses the border-radius attributes in it's css to make the corners rounded.

I need this to be consistant in IE7,8,9, Firefox etc.

I have seen various posts on the net telling me now to change this, but I have not had any success.

This is the code from the JQUERY UI css for it:

/* Corner radius */
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl { -moz-border-radius-topleft: 4px/*{cornerRadius}*/; -webkit-border-top-left-radius: 4px/*{cornerRadius}*/; -khtml-border-top-left-radius: 4px/*{cornerRadius}*/; border-top-left-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr { -moz-border-radius-topright: 4px/*{cornerRadius}*/; -webkit-border-top-right-radius: 4px/*{cornerRadius}*/; -khtml-border-top-right-radius: 4px/*{cornerRadius}*/; border-top-right-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl { -moz-border-radius-bottomleft: 4px/*{cornerRadius}*/; -webkit-border-bottom-left-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-left-radius: 4px/*{cornerRadius}*/; border-bottom-left-radius: 4px/*{cornerRadius}*/; }
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { -moz-border-radius-bottomright: 4px/*{cornerRadius}*/; -webkit-border-bottom-right-radius: 4px/*{cornerRadius}*/; -khtml-border-bottom-right-radius: 4px/*{cornerRadius}*/; border-bottom-right-radius: 4px/*{cornerRadius}*/; }

Can anyone please help?

Upvotes: 0

Views: 1230

Answers (1)

Alastair Hodgson
Alastair Hodgson

Reputation: 361

If you want borer radius in IE8 and below you could try to use css3pie:

http://css3pie.com/

This will enable border radius, box shadow and other bits.]

I don't like using it personally, but it does work

Upvotes: 3

Related Questions