Border + border-radius = problems in Safari

[Vermaas]

Hi all,

I’m struggling with a CSS issue for quite a long time now and I’m not sure how to tackle this problem, or it’s a browser issue.

Every time I use border: 1px solid black (example, every other setting will (not) work too) combined with border-radius: 2px (example). Safari decides to give me the finger..

Strange white stripes are popping up all around the target HTML element and the right border disappears and it just look like shit.. So is this only me? Or are others having trouble with Safari (the latest) too?

I’ve seen this issue on both my iMac (2011) and MacBook (2012) and only on Safari.

It has nothing to do with other code in my stylesheets (I see this issue on almost every website that uses border-radius). So am I the only one or is this a bug?

An “example in the wild”: http://cl.ly/image/1F2l3M461N0y

cc: @chriscoyier

[Andy Howells]

Can you create a [codepen](http://codepen.io) – it’s quite possible this is a browser glitch, but there may be something in your code causing this problem.

[Vermaas]

Check this pen out: http://codepen.io/stefanvermaas/pen/tKaxy

In this pen you see that the right side of the block element has an extra stripe. At least.. I do..

If you add a border with 2 pixels, the problem is solved. Seen this on many website’s (see also the example in the opening post. That’s a screen from Lea Verou’s website).

[elmsoftware]

I do not see that on my MacBook…In Chrome or Safari on Mac or in ie in Windows 8 on my Mac.

I did see the issue in your cloudapp picture though.

[Vermaas]

Strange.. This is what I see: http://cl.ly/image/0X2q3r1B1V2s

I’ve only got this issue on Safari (latest).

[Author]

Posts