Rounded Corners on DIVs with Background Color

Question

I've got some code that looks like this:

<div id="shell">
    <div id="title">TITLE HERE</div>
    <div id="content">Article Content Goes Here</div>
</div>

The shell div has a grey border that I want rounded corners on. The problem I'm running into is the title div has a green background and it's overlapping the rounded corners of the shell. It either overlaps or doesn't jut up against the edges to provide a fluid look.

I'm looking for a solution that's backwards compatible with IE 7 and 8, but if there's a solution in HTML5 that's simple I would be willing to lose those browsers.

Thanks!

Answer 1

In your markup, you have to give border-radius to both #shell and #title so that the #title's sharp corners don't overlap #shell's.

A live example, http://jsfiddle.net/BXSJe/4/

#shell {
 width: 500px;
 height: 300px;
 background: lightGrey;
 border-radius: 6px;
}

#title {
 background: green;
 padding: 5px;
 border-radius: 6px 6px 0 0;
}

Answer 2

Another way to accomplish this was to set the outer div to have a overflow to hidden

#shell {
 width:500px;
 height:300px;
 background:lightGrey; 
 border-radius: 10px 10px 10px 10px;
 overflow:hidden;
}
#title {
 background:green;
 padding:5px;
}

http://jsfiddle.net/jdaines/NaxuK/

Answer 3

You'll probably want to round just the top two corners of the title div with the same radius as the shell div so that they don't overlap. The CSS3 you would use is:

border-top-left-radius: XXpx
border-top-right-radius: XXpx

For backward compatibility with old Mozilla browsers you should also use:

-moz-border-radius-topleft: XXpx
-moz-border-radius-topright: XXpx

And for old versions of WebKit browsers (Safari, mainly), you can use:

-webkit-border-top-left-radius: XXpx
-webkit-border-top-right-radius: XXpx

However, there is nothing you can do about old Internet Explorer browsers as far as I know, except use images.

Answer 4

You can use PIE with IE7 and 8. It enables some CSS3 functionality in IE7 and IE8. And yes, I know, it is not a browser, it's a pain. Maybe a curse.

You can check it here.

Answer 5

Internet Explorer did not support border-radius until IE9, much to the frustration of developer and designers. With IE9, the important steps are using the edge META tag and provide the border radius:

<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style>
border-top-right-radius: 7px;
border-top-left-radius: 7px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;
</style>

Source - http://davidwalsh.name/css-rounded-corners

I'd rather use images, but IE can do down the drain. Microsoft should step up it's game, and support CSS3.