Question

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.

Answer 1

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

border-bottom: 1px solid #222;