border-radius not working in Chrome? Any workaround?

Question

I have set border-radius (and -moz-border-radius for the older browsers) to 20px, and I have it working beautifully in Safari and Firefox. Then, I open up Chrome and it's refusing to accept the defined border-radius. Any suggestions to work around this in Chrome?

See the CSS coding in action here: http://jsfiddle.net/MAYea/

Screenshot in Safari:

Screenshot in Chrome:

Solution 1

It's not that border-radius isn't working, it's that overflow is failing to hide the overflow.

This is actually a new bug in Chrome. I have a similar problem on my Doomsday clock even though it worked perfectly in an earlier version of Chrome.

As a workaround, you can specify the border-radius on the contained elements as well as the container.

Solution 2

I had a similar issue, it helped to add

z-index: 0; /* or some other value */

but also

transform: translateY(0);

seems like this is enabling some kind of different rendering (guess nothing with 3d context like we sometime do to FORCE GPU rendering...)

the reason why this works I cannot not explain, maybe somebody else can?

I have this particular problem right now, with latest Chrome v44 on OS X 10.10.5...and yes, I know that this was "fixed" and it's an old question =)...

EDIT: Found the same fix in another SO-Question, check here: link

Solution 3

-webkit-border-radius: is what your looking for I think?

Solution 4

Add the border-radius: 20px; CSS rule to both :before and :after

DEMO

View more solutions