Border-Radius Broken in Webkit?

. Filed under Random.

Border-radius with a background image appears to be broken in webkit (tested in both Chrome and Safari on Mac). Check out how much the background colour bleeds over the corner. Is this a known issue? I came across this randomly on the Winnipeg Free Press mobile site. It looks like the same issue is not affecting the WordPress UI I’m currently typing it.  I haven’t had time to try to duplicate the issue yet. What are the combination of factors that cause this bug to appear?

  • http://www.ianmrountree.com Ian M Rountree

    It’s a border-clip issue. Webkit specific as well; you can set the border to cut off within the padding, within the margin, or on-par with the border; which is default, and why rounded corners look like junk sometimes.

  • http://www.ianmrountree.com Ian M Rountree

    Urgh, prematurely hit post.

    Here’s something helpful: http://www.css3.info/preview/background-origin-and-background-clip/

  • Anonymous

    Thanks, this is helpful!