Comments on: CSS: inner elements breaking border-radius

By: Anup Shah

Anup Shah — Tue, 22 Nov 2011 16:29:20 +0000

Yes, you are right – just checked (Firefox 8 here). I guess since I wrote the original (back in July 2009) browsers have thankfully address this. I’ll update the article when I get a moment (not had a chance to write almost anything for a LONG time…!)

By: Flu

Flu — Tue, 22 Nov 2011 16:12:18 +0000

You simply need to add “overflow:hidden” on the outer div.

In your example:
…

This works on my HTC Stock Browser, in Chrome 16 (have no other, sorry), and in Firefox 4.0.

Nothing else is needed. Try it out on the first DIV in this article, where the rounded bottom borders are broken.

By: baboon.co

baboon.co — Sun, 13 Mar 2011 09:15:45 +0000

Thanks it helps a lot.

By: slothbear

slothbear — Mon, 07 Feb 2011 22:25:17 +0000

Thanks for this hint; it helped me at just the right time. I’ve been struggling with borders/padding of variable-width menus on my site.

By: ambiguna

ambiguna — Mon, 17 Jan 2011 12:58:46 +0000

Thanks for this article, it helps a lot. But I have a problem it isn’t solved yet with border-radius applied in a div with overflow. Not only the inner elements brake the rounded border, but also the scroll bar!

By: Anup Shah

Anup Shah — Wed, 04 Aug 2010 19:14:47 +0000

lol Fen: agreed, Phantom Menace was disappointing after all that expectation, but the Yoda quote was great (at least IMO!)

By: Fen

Fen — Wed, 04 Aug 2010 15:10:24 +0000

Yoda, Star Wars, Episode 1: The Phantom Menace

Seriously. The Phantom Menace?

I am disappoint.

By: Keil Miller Jr

Keil Miller Jr — Mon, 22 Feb 2010 01:46:42 +0000

Thanks. This sucks, but I added a div around my image and applied border-raduis to both. It worked, although it is not very DRY. Come on webkit

By: Norwinter Studios » A trick for Safari 4.0.3 table with border-radius and row background color leak.

Sat, 22 Aug 2009 03:07:37 +0000

[...] does help is to follow these instructions and make sure that the inner element with a background-color has a matching rounded [...]