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 rou

Solution 1:

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

border-bottom: 1px solid #222;

Solution 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.

Solution 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;