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; }

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

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/