Quantcast
Channel: onenaught.com » CSS
Viewing all articles
Browse latest Browse all 3

CSS: inner elements breaking border-radius

0
0

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.


Viewing all articles
Browse latest Browse all 3

Latest Images

Trending Articles





Latest Images