Rounded Corners on DIVs with Background Color
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/
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>