On this page:
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
.
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.