#4034 closed enhancement (wontfix)

Opened February 01, 2009 08:24PM UTC

Closed February 06, 2009 10:18PM UTC

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

Reported by: mephis1987 Owned by:
Priority: minor Milestone: 1.7
Component: ui.css-framework Version: 1.6rc6
Keywords: Cc:
Blocked by: Blocking:
Description

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?

Attachments (0)
Change History (1)

Changed February 06, 2009 10:18PM UTC by scottjehl comment:1

resolution: → wontfix
status: new → closed

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/