Border-radius and Safari 4.0.5


I rounded the corners of my navigation bar with the following code:

border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;

It looks perfect in Firefox but in Safari you see some darker lines around the rounded corners.

Here you can see what I mean:

Is there something I can do about it?

Her the code oft the main navigation bar:

#menu h3 {
font-weight: normal;
font-size: 0.8em;
font-family:Arial, Helvetica, sans-serif;
display: block;
border: 1px #92A8C4 solid; /* normal blå*/
white-space: nowrap;
margin: 0;
padding:8px 0 8px 0;
background: #415364 url(images/test.png) repeat-x 0 50%; /*blå*/
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;



It seems to be a combination of the border on the round elements and the gradient background background in the body catching Safari out.

Remove the border from the h2 and it should look a lot better.

border: 1px #92A8C4 solid; /* normal blå*/

I can’t hardly notice any difference without the border apart from the corners look much better in safari. You may have to space the elements a bit with margins because they will butt up after the border is removed.

Thank you very much!

Nope :). The only way to see what different browsers view it ias (besides getting screenshot services) is to get it straight from the horses mouth ;).