2

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:

Safari

Screenshot in Chrome:

Chrome

Andy Dwyer
  • 696
  • 1
  • 10
  • 30

6 Answers6

6

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.

Niet the Dark Absol
  • 320,036
  • 81
  • 464
  • 592
  • 9
    Chrome is like some kind of new breed of IE. – BoltClock Dec 15 '12 at 06:20
  • 1
    Very true. It's sad when almost all of the CSS3 stuff I've been doing works in IE10 but not in Chrome... – Niet the Dark Absol Dec 15 '12 at 06:22
  • Forget CSS3; it's still getting many parts of CSS2.1 wrong where IE8 gets them right (although to be fair, IE8 screws up in its own ways too)... – BoltClock Dec 15 '12 at 06:23
  • Yes, I have. Also: text shadows. Those were extremely hideous in Chrome and I couldn't use it for like the first 8 versions because it made my display text (e.g. headings, not body text) unreadable. I've been of the opinion that Microsoft are getting their act together - and doing it pretty well. That said, IE9/IE10 still have some new issues of their own, e.g. [they don't implement the `not` keyword in media queries correctly](http://stackoverflow.com/questions/13634326/how-to-avoid-media-query-overlap/13649011#13649011). – BoltClock Dec 15 '12 at 06:26
  • Hey, have you seen [IE10's advertising techniques](http://thebrowseryoulovedtohate.com)? Seems quite effective and accurate to me! Also humble, in some ways. Like they're acknowledging that they have a crappy history. – Niet the Dark Absol Dec 15 '12 at 06:27
  • I've seen it, and I find it kind of corny IMO. But it has some merit; they really have been getting their act together. – BoltClock Dec 15 '12 at 06:28
  • Now they just have to convince the haters about that ^_^ Anyways, back to playing with `animation` stuff - haven't had this much fun since I discovered `setInterval`. – Niet the Dark Absol Dec 15 '12 at 06:31
  • As a designer with OCD this is tough news to digest. Applying the style to child elements just doesn't look right. I may have to switch to an image-based stylization now. Either way, thanks for the insight. – Andy Dwyer Dec 15 '12 at 06:35
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

Community
  • 1
  • 1
exside
  • 3,736
  • 1
  • 12
  • 19
1

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

Ryan
  • 5,644
  • 3
  • 38
  • 66
1

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

DEMO

bobthyasian
  • 933
  • 5
  • 17
0
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;


 -webkit-border-radius: for the Chrome

If you need it try this javascript library from here

underscore
  • 6,495
  • 6
  • 39
  • 78
0

You can use,

border-radius: 100

Instead of, 

border-radius: 100px

it will do the job in IE but not in Chrome.

XPD
  • 1,121
  • 1
  • 13
  • 26
Jason
  • 1