css class ui-corner-* should support Safari and other CSS3 browser

[mephis1987]

W3C has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function

For example we already had in ui.theme.css (line 239)

.ui-corner-all {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
}

However in Safari and other CSS3 browser there are other properties, for example

.ui-corner-all {
-moz-border-radius:5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}

And is there any work around for IE?

[scottjehl]

Unfortunately, no. IE doesn't support border-radius and unfortunately they don't plan to implement it until at least IE9, as far as I know.

jQuery UI supports rounded corners for Safari, Firefox, and Chrome. Other browsers will fall back to square corners. If you view the ui.theme.css file in a text editor, you'll see the rules for moz (mozilla) and webkit (safari, chrome). The third line in your example is no longer in our code since it's not yet in w3c recommendation status.

For IE, there are a few workarounds you can try, such as VML-drawing jQuery plugins that may or may not work with UI. Here's an article for example: ​http://www.filamentgroup.com/lab/styling_buttons_and_toolbars_with_the_jquery_ui_css_framework/