CSS: inner elements breaking border-radius

Posted on by

On this page:

  1. The problem
  2. The solution
  3. Update: Translation to Ukranian

Browsers such as Firefox 2+ and Webkit-based browsers (Chrome, Safari) support the useful css border-radius feature (via -moz-border-radius and -webkit-border-radius, respectively).

Unfortunately inner elements can break rounded borders as Richard Rutter described when using <img> elements inside an element with border-radius. He also provided a useful solution which is webkit only, unfortunately.

The problem

Here’s an example (view in Firefox 2+ or Safari/Chrome) where border-radius gets broken:

(If you are reading this in an RSS feed reader, you might need to go to the page to see the example properly)

A div containing a blockquote and a paragraph to mention the source of the quote:

Fear is the path to the Dark Side… Fear leads to anger… anger leads to hate… hate leads to suffering…

— Yoda, Star Wars, Episode 1: The Phantom Menace

Notice the bottom corners aren’t right: the background of the source paragraph breaks through the rounded corners.

The rounded corners are achieved using something like this:

.blockquote-with-source {
  border:1px solid #e8eac8;
  border-radius:10px;
  -moz-border-radius:10px;
  -webkit-border-radius:10px;
}

(The above code is of course slightly more than necessary due to both mozilla and webkit implementing them via their rendering prefixes.)

The solution

[Updated: October 2012]

On the outer div, simple add overflow:hidden.

Fear is the path to the Dark Side… Fear leads to anger… anger leads to hate… hate leads to suffering…

— Yoda, Star Wars, Episode 1: The Phantom Menace

Thanks to @Flu in the comments for updating us with this.

Since this article was originally written back in 2009, the solution presented at the time (applying border-radius to some of the inner elements) no longer seems to apply, and has therefore been removed.

Note, you may also be able to get rid of the -moz and -webkit prefixes in your CSS depending on what support level you are aiming for.

Update: Translation to Ukranian

June 2012: This post was translated into Ukrainian at http://softdroid.net/css-vnutr by Eclipse Android.

17 thoughts on “CSS: inner elements breaking border-radius”

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

  3. Yoda, Star Wars, Episode 1: The Phantom Menace

    Seriously. The Phantom Menace?

    I am disappoint.

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

  5. 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!

  6. 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.

  8. 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.

    • 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…!)

  9. Hi,

    I’ve come across this issue in Chrome 17, today. There’s a bug report which was logged in November last year but the issue is still ‘unconfirmed’.

    I’ve tried a couple of workarounds but they don’t seem to work in my situation.

    Cheers

  10. If you want to change the border-radius, you have to change it for each sub element. To avoid this, you can use the following:

    div.parent {
    border-radius: 5px;
    …
    }

    div.parent div.child {
    border-radius: inherit
    }

    You have to leave the border-radius attribute, but you can use “inherit”. If you want to change 5px to 3px, you only have to change one css class.

  12. None of these solutions will work in firefox – neither your examples nor my site will display correctly.

  13. Hi nikl. Sorry I’ve not had a chance to update the article, but if you see comment from Flu, using overflow:hidden on the outer div should do the trick. Hope that helps. I will try to update this article at some point. I have updated the article (finally).

  15. Does not work in Firefox and Safari. With inherit or overflow: hidden the inner div does not fully overlap the outer div

Comments are closed.