onenaught.com

Posted on: Thursday, July 9th, 2009 at 9:34 am

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.

Inner elements with background colors can also break border-radius. But there is a way around that too: apply border-radius to the offending inner elements too.

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:

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 ideal solution

overflow:hidden on inner elements should do the trick, but doesn’t work in Safari, Chrome or Firefox (although will work for the webkit-based ones for images as Richard Rutter points out in the above link).

Workaround for non-image elements with backgrounds

There are a few ways to work around this:

Apply border-radius to the inner element breaking the rounded corners

If you are using background color (or background image) on the inner HTML element, you can apply border-radius to them too:

In the case of the above example, we just need rounded corners on the bottom left and bottom right of the source paragraph:

.source {
    border-radius-bottomleft:10px;
    border-radius-bottomright:10px;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    -webkit-border-bottom-left-radius:10px;
    -webkit-border-bottom-right-radius:10px;
}

The final styled quote would then look like this:

(If you inspect the above with Firebug or equivalent, you’ll notice I used slightly different CSS classes so it just fits with the current theme on this blog, but the principle is the same.)

Drawback to the above workaround

The main one I can think of is that you have to maintain the border radius value in more than one place — CSS variables would be nice here

Thick enough borders hide the problem

If your design allows it, thick borders on the element using border-radius may do the trick.

In the example below, I use a thick border on the left side of the containing div, with border radius only on the bottom right of the source paragraph:

The thickness of the border is the same as the size of the radius, though you don’t have to do that.

Drawback to the above workaround

When using one thick border as above, it doesn’t render as nicely in webkit as it does in gecko. Don’t know if that is vagueness in the spec, or what…

However, if all four borders are given the same width, then it seems ok.

Workaround for image elements

As Richard Rutter commented, putting an image as a CSS background image would do the trick, but that isn’t always ideal or possible (e.g. an image that is important as part of the content is better marked up as <img>).

Are there other, perhaps better, ways to deal with this?

About this post

This entry was posted on Thursday, July 9th, 2009 at 9:34 am and is filed under CSS, General Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.