Search code examples
htmlsafaricss

Fixing Border Radius in Safari?

I'm in a bit of a problem here. I can't seem to get the border-bottom-radius-left and right to work properly on Safari. I took screenshots of the border radius on 3 browsers (Chrome, Firefox, and Safari). Only Safari had the trouble.

Google Chrome

Chrome

Firefox

Firefox

Safari

Safari

From there, you can pretty much tell the problem. I used border-bottom-left-radius: 120px; and border-bottom-right-radius: 20px;. However, the two top radius properties seem to be working fine.

I'm kinda stuck because I'm not sure how to fix this. By the way, I'm talking about Safari Version 5.1.2 (6534.52.7).

Solution

  • Looks like a Safari bug to me. Caused by using a border-radius larger than your elements height.

    Easy fix; set the border-radius to match the element's height. I can't see a reason to make it larger anyway.

    If for some reason you need an example: http://jsfiddle.net/zejQX/

    EDIT

    You can supply more than one value to achieve different results:

    border-bottom-left-radius: 150px 50px;

    Here's an example with a "wide arch" as requested below: http://jsfiddle.net/BpJ7v/3/