Home/ Questions/Q 290159
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T05:58:20+00:00

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

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.)

    • 0