CSS3 Rounded Corners w/Border issue

HTML & CSS
1

I am looking for advice on an issue I am seeing when using css3 rounded corners and with a border applied.

So, for example, if you have a div with class applied such as:
.nav {

    height:75px;
    width:500px;
    background-color: #3f6ea8;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    border:5px solid #dedede;
    }

this causes a weird issue on the outside of the rounded corners where you can see the background color just slightly peaking over the solid border color…almost like when you used to use transparent gifs when doing rounded corners before css3.

Anyone know of a fix for this?

Regards,
2009site2009

2

Which browser is exhibiting the issue?

Can you post a link to the page or post your HTML within in the [ code ] [ /code ] tags?

3

This is happening on a mac in Safari 5.0.4 I will have to post in a link in a bit to show what I am referring to.

4

it looks like it’s an anti aliasing issue, nothing to worry about.

5

Problem solved…
-webkit-background-clip: padding-box;

Thanks goes to Dan Rubin!

6

Hi,

Yes that’s the common solution but you might like to add the real property so that Opera (and others) can play also. :slight_smile:


.nav {
    height:75px;
    width:500px;
    background-color: #3f6ea8;
    border-radius: 15px 15px 15px 15px;
    -moz-border-radius: 15px 15px 15px 15px;
    -webkit-border-radius: 15px 15px 15px 15px;
    border:5px solid #dedede;
    -webkit-background-clip: padding-box;
  [B]  background-clip: padding-box[/B]
}