The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Border + border-radius = problems in Safari

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #41422

    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”:

    cc: @chriscoyier

    Andy Howells

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


    Check this pen out:

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


    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.


    Strange.. This is what I see:

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.