0

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.

3 Answers 3

1

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

border-bottom: 1px solid #222;
0
1

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.

1
  • For that particular example I went back to using background images to create the illusion of rounded corners, but I've come to terms with this bug now and simply let it be. It affects a small number of users and in most cases it's not very noticeable in the small rounded corners I use. Feb 16, 2012 at 14:48
0

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;
1
  • Unfortunately that doesn't work. I did try that before but no luck.
    – alexganose
    Feb 16, 2012 at 14:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.