CSS border-radius issue in Safari 6

4
votes

I want to create a box with the top left and top right corners rounded. My CSS:

border-radius: 4px 4px 0 0;

In Safari 6, border-radius creates some distortion/artifacts. The corners are 'rough' and mysterious vertical white lines (box bg is blue) appear.

I've tried everything (-webkit-border-radius, border-top-left-radius, border-top-right-radius, border-style:none, border-width:0, border-color:transparent, etc) but this seems to be the only thing that doesn't break:

border-radius: 4px;
  1. Is this a webkit bug? (Chrome has the corner artifacts, but no others)
  2. If not, how can I round just the top left and right corners without running into these problems?
  3. I am using a 2012 MacBook Air, OSX Mountain Lion (10.8), Safari 6.0.1, Chrome 22.0.1229.94
1
csssafari6
Just a note, you can for example use droplr.com for quick hosting of images, and jsfiddle.net for working examples. – ndm
It might help using: background-clip: padding-box; – Edd Turtle

1 Answers

0
votes

Here is a possible answer, but you could be dealing with a number of things, so @ndm makes an excellent suggestion for ways to share an example.

To help debug what is going on, I like to increase the border radius and add colored backgrounds.

Overflow

You might just have content inside the box that is overflowing and covering up the corner. Try .box { overflow: hidden; }. Here's a JSFiddle that verifies three common scenarios working in Safari 6.0.2.

Antialiasing

If the "mysterious white lines" are very subtle, it could simply be Safari's anti-aliasing which tries to make the border appear smoother. Check this theory by making the border thicker and comparing the look.