Opened 11 years ago

Closed 11 years ago

#4034 closed enhancement (wontfix)

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?

Change History (1)

comment:1 Changed 11 years ago by scottjehl

Resolution: wontfix
Status: newclosed

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/

Note: See TracTickets for help on using tickets.