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

---

Firefox

---

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

回答1:

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/

回答2:

Try adding

-webkit-background-clip: padding-box;

to your element that has the border radius.

See http://goo.gl/ywAa1

来源：https://stackoverflow.com/questions/9634447/fixing-border-radius-in-safari