Html Safari渲染圆角不正确

我有一个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>

新闻服务器

这将产生下图：

正如你所看到的，底角有一个蓝色的边缘

有人知道我在做什么吗？还是我犯了个错误

---

谢谢。

我想这是Safari中的一个bug。我在Chrome的一个稍微有序的版本中注意到了类似的效果，这表明这是一个Webkit错误，谷歌已经修复了，但尚未在苹果的版本中实现。

您是否尝试过定义底部、左侧和右侧的边框

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

---

这是一个bug，但您可以通过添加

底部边框来防止它：

border-bottom: 1px solid #222;

不幸的是，这不起作用。我以前确实试过，但没有成功。对于那个特定的例子，我回到了使用背景图像来创建圆角的错觉，但我现在已经接受了这个错误，就让它去吧。它影响到一小部分用户，在大多数情况下，我使用的小圆角不太明显。