Исправление радиуса границы в Safari?

Question

У меня тут небольшая проблема.Кажется, я не могу получить границы нижнего радиуса влево и вправо для правильной работы в Safari.Я сделал скриншоты радиуса границы в 3 браузерах (Chrome, Firefox и Safari).Проблема возникла только у Safari.

---

Google Chrome

---

Firefox

---

Safari

---

Оттуда вы можете в значительной степени сказатьпроблема.Я использовал border-bottom-left-radius: 120px; и border-bottom-right-radius: 20px;.Однако два свойства верхнего радиуса работают нормально.

Я застрял, потому что не уверен, как это исправить.Кстати, я говорю о Safari версии 5.1.2 (6534.52.7).

Answer 1

Похоже, ошибка Safari для меня.Вызывается с помощью border-radius больше, чем ваши элементы height.

Easy fix;установите border-radius, чтобы соответствовать height элемента.В любом случае, я не вижу причин, чтобы увеличить его.

Если по какой-то причине вам нужен пример: http://jsfiddle.net/zejQX/

РЕДАКТИРОВАТЬ

Вы можете поставить более одногозначение для достижения разных результатов:

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

Вот пример с "широкой аркой", как указано ниже: http://jsfiddle.net/BpJ7v/3/

Answer 2

Попробуйте добавить

-webkit-background-clip: padding-box;

к вашему элементу с радиусом границы.

См. http://goo.gl/ywAa1