Grow your CSS skills. Land your dream job.

Border + border-radius = problems in Safari

  • # December 18, 2012 at 9:07 am

    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

    # December 18, 2012 at 9:48 am

    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.

    # December 18, 2012 at 1:09 pm

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

    # December 18, 2012 at 1:30 pm

    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.

    # December 18, 2012 at 1:34 pm

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

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".