OhRyan.ca

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?

Found this on Nettuts+:

I stumbled across this bizare new rendering bug in Firefox 3.

CSS:

hr {
	background: url("bar.gif") no-repeat;
	width: 385px; height: 15px;
	border: 0;
}

HTML:

<hr noshade="noshade" />

Here’s what it looks like in Firefox 2.

Now Firefox 3.

It would appear that Firefox 3 is adding a border-radius value to all <hr/> tags. Removing the noshade=”noshade” property, or adding -moz-border-radius: 0 in the css will remove the rounded edges.

Check it out.