Safariレンダリングの丸みを付けたコーナーが正しくありません

Question

私は下部に丸い角を、上部に通常の角を持つdivを持っています。このdivにはまた、上に沿って境界があります。しかし、この境界線は、底部の丸い角に「浸透」しているようです。この問題は、Safari（私は5.1.3を使用しています）にのみ存在し、ChromeやFirefoxでは存在しません。

.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は次のとおりです：

このバグに関連するCSSです

<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のやや古いバージョンでも同様の効果が見られました。これは、Googleが修正したがまだAppleのバージョンで実装されていないWebkitのバグであることを示しています。

Answer 3

境界を左下と右下に定義しようとしましたか？

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