tags:

views:

4916

answers:

2

This issue is about the CSS3 border-radius property (http://www.css3.info/border-radius-apple-vs-mozilla/)

An example of this problem is here:

http://jamtodaycdn.appspot.com/bin/rounded.html

In this URL, I have rounded divs that appear to be rounded in FF3, but on Safari and Chrome the rounded corners are not there.

The style is as follows:

-moz-border-radius-bottomleft:2px;
-moz-border-radius-bottomright:92px;
-moz-border-radius-topleft:92px;
-moz-border-radius-topright:2px;
-webkit-border-bottom-left-radius: 2px;
-webkit-border-bottom-right-radius: 92px;
-webkit-border-top-left-radius: 92px;
-webkit-border-top-right-radius: 2px;

I'm fairly sure that this CSS is formatted correctly, so I'm clueless as to what the problem is.

+2  A: 

Don't you need to apply a border or border-width property as well as the various border-radius properties?

Also, I've noticed Safari dropping the radius above certain radius values - try reducing the pixel values & see what happens.

Mark Beaton
Regarding paragraph one, no, you don't need to specify "border" or "border-width" properties in order to use "border-radius" property.
Steve Harrison
+5  A: 

The problem appears to be in the 92px radia. It looks like the maximum radius that the 20-pixel-high div can handle is 18px. It's not necessarily obvious what a 92 pixel radius means in that case. However, you can specify both an X and Y radius using something like this:

-webkit-border-bottom-right-radius: 92px 18px;

(side note, you shouldn't use the same ID for multiple HTML elements. You should use class instead, and adjust your CSS selector so it says .round instead of #round.)

Jacob
Good point about the ID. This was something I hacked up in a few seconds, but that's always good advice.
jamtoday
The maximum radius part makes sense, but the buggish part of this behavior is that if it can't render the border as specified, it doesn't round the border at all, whereas Mozilla renders the border as much as it can.
jamtoday