Web Development

Border-Radius Broken in Webkit?

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?

3 replies on “Border-Radius Broken in Webkit?”

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.

Leave a Reply

Only people in my network can comment.