css – 具有背景颜色的DIV上的圆角

我有一些代码看起来像这样：

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

shell div有一个灰色边框，我想要圆角。我遇到的问题是标题div有一个绿色的背景，它与外壳的圆角重叠。它或者重叠或不突出在边缘以提供流畅的外观。

我正在寻找与IE 7和8向后兼容的解决方案，但如果HTML5中有一个解决方案很简单，我会愿意失去这些浏览器。

谢谢！

解决方法

在你的标记中，你必须给#shell和#title赋予border-radius，所以#标题的尖角不与#shell重叠。

一个现场的例子，http://jsfiddle.net/BXSJe/4/

#shell {
 width: 500px;
 height: 300px;
 background: lightGrey;
 -moz-border-radius: 6px; 
 border-radius: 6px; /* standards-compliant: (IE) */ 
}

#title {
 background: green;
 padding: 5px;
 -moz-border-radius: 6px 6px 0 0;
 border-radius: 6px 6px 0 0; /* standards-compliant: (IE) */
}