CODEWITHSUNDEEP
htmlcsssafarirounded-corners
alexganose
alexganose

Reputation: 237

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:

Weird rounded corners

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.

Upvotes: 0

Views: 434

Answers (3)

bookcasey
bookcasey

Reputation: 40433

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

border-bottom: 1px solid #222;

Upvotes: 1

Rahil Pirani
Rahil Pirani

Reputation: 591

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;

Upvotes: 0

Kjartan Sverrisson
Kjartan Sverrisson

Reputation: 123

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.

Upvotes: 1

Related Questions