Reputation: 5084
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.
Upvotes: 17
Views: 35085
Reputation: 852
simple type just use:
border-radius:92px 92px 2px 2px;
where:
border-radius:top right bottom left;
Upvotes: 1
Reputation: 297
For anyone referring to this for help with rounded corners, I agree with Jacob's answer regarding Webkit, but the question also mentioned Chrome not working. Chrome uses standard CSS3 rounded corners which are exactly like Webkit's, but without the preceding '-webkit-' on the rule. These are as follows:
border-bottom-right-radius:2px;
To take into account Firefox, Webkit and Chrome, you'd need to do something like this:
-moz-border-radius-topright:3px;
-moz-border-radius-bottomright:3px;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
The third set of rules are CSS3 rules and are supported by Chrome. This is a good way to also get rounded corners in IE using something like CSS3Pie: http://css3pie.com/
Upvotes: 2
Reputation: 78920
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.)
Upvotes: 14
Reputation: 2677
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.
Upvotes: 1