Css 带背景色的div上的圆角

我有一些代码如下所示：

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

标题在这里
文章内容在这里

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

我正在寻找一个与IE7和IE8向后兼容的解决方案，但如果HTML5中有一个简单的解决方案，我愿意放弃这些浏览器

---

谢谢

直到IE9，Internet Explorer才支持border radius，这让开发人员和设计师非常失望。对于IE9，重要的步骤是使用edge META标记并提供边界半径：

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

边框右上角半径：7px；
边框左上半径：7px；
边框右下半径：2px；
边框左下半径：2px；

来源-

我宁愿使用图像，但也可以直接使用。微软应该加强它的游戏，并支持CSS3。

你可以使用IE7和IE8。它在IE7和IE8中启用了一些CSS3功能。是的，我知道，这不是一个浏览器，这是一种痛苦。也许是诅咒

---

您可以检查它。

在标记中，您必须为

#shell

和

#title

提供边框半径，以便

#title

的锐角不重叠

#shell

一个活生生的例子

---

您可能只需要使用与shell div相同的半径来圆角title div的上两个角，这样它们就不会重叠。您将使用的CSS3是：

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

为了与旧的Mozilla浏览器向后兼容，您还应使用：

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

对于旧版本的WebKit浏览器（主要是Safari），您可以使用：

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

---

但是，据我所知，对于旧的Internet Explorer浏览器，除了使用图像之外，您无能为力。

实现这一点的另一种方法是将外部div设置为隐藏溢出

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

---

这个例子是错误的。示例中的圆角在JSFIDLE中不起作用。

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