Safari неправильно отображает закругленные углы

Question

У меня есть div с закругленными углами внизу и нормальными углами вверху.Этот div также имеет границу вдоль вершины.Однако эта граница, кажется, просачивается вниз к закругленным углам внизу.Эта проблема присутствует только в Safari (я использую 5.1.3), а не в Chrome или Firefox.

CSS, связанный с этой ошибкой:

.info {
    float: left;
    width: 272px;
    height: 200px;
    background: #222222;
    border-top: 5px solid #6fcbe4;
    -webkit-border-bottom-right-radius: 18px;
    -webkit-border-bottom-left-radius: 18px;
    -moz-border-radius-bottomright: 18px;
    -moz-border-radius-bottomleft: 18px;
    border-bottom-right-radius: 18px;
    border-bottom-left-radius: 18px;
    padding: 0 14px 0 14px;
}

И html:

<div class="info left">
    <h3>new<span class="pink">server</span></h3>
</div>

И это приводит к изображению, показанному ниже:

Где, как вы можете видеть, нижние углы имеют синий край.

Кто-нибудь знает обходной путь или я совершаю ошибку?

Спасибо.

Answer 1

Это ошибка, но вы можете предотвратить ее, добавив bottom-border:

border-bottom: 1px solid #222;

Answer 2

Я думаю, что это ошибка в Safari.Я заметил аналогичный эффект в слегка упорядоченной версии Chrome, которая предполагает, что это ошибка Webkit, исправленная Google, но еще не реализованная в версии Apple.

Answer 3

Вы пытались определить границу для нижнего, левого и правого краев?

border-left: solid 0px none;
border-right: solid 0px none;
border-bottom: solid 0px none;