Safari Rendering Rounded Corners Incorrectly

问题:

I have a div with rounded corners at the bottom and normal corners at the top. This div also has a border along the top. However this border seems to 'seep through' down to the rounded corners at the bottom. This issue is only present in Safari (I'm using 5.1.3) and not Chrome or Firefox.

The CSS related to this bug is:

.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;
}

And the html is:

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

And this results in the image seen below:

Where as you can see the bottom corners have a blue edge to them.

Does anyone know a work around to this or is it a mistake I'm making?

Thanks.

回答1:

It's a bug, but you can prevent it by adding a bottom-border:

border-bottom: 1px solid #222;

回答2:

I think this is a bug in Safari. I noticed a similar effect in a slightly order version of Chrome, which suggests this is a Webkit bug that Google has fixed but has not yet been implemented in Apple's version.

回答3:

Have you tried defining the border for bottom, left, and right?

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