Border-radius and Safari 4.0.5

HTML & CSS
1

Hello!

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: http://home.nith.no/~elljul/

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;
text-align:center;
background: #415364 url(images/test.png) repeat-x 0 50%; /*blå*/
border-radius: 8px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;

}
2

Hi,

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.

3

Thank you very much!

4

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 ;).