代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css圆角div</title>
</head>
<body>
<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="background:#E1E7E9; border:1px solid #B0BEC7; border-width:0 1px;">
<div style="font-size:12px; font-weight:bolder; font-family:Verdana; color:#258; padding:2px 10px 5px;">
标题，这里想要换背景色，就在这个div的style中增加background-color属性，换了之后需要设定一下宽度，不然很丑
</div>
<div style="background:#FFF; margin:0 3px; font-size:11px; font-family:Verdana; color:#333; padding:5px 10px; overflow:hidden;">
这是内容区域，背景色为白色，如果想要跟标题那一样，就把background的颜色改为#E1E7E9，也就是跟第2个div的background颜色一样
</div>
</div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>纯css圆角div</title>
</head>
<body>
<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="background:#E1E7E9; border:1px solid #B0BEC7; border-width:0 1px;">
<div style="font-size:12px; font-weight:bolder; font-family:Verdana; color:#258; padding:2px 10px 5px;">
标题，这里想要换背景色，就在这个div的style中增加background-color属性，换了之后需要设定一下宽度，不然很丑
</div>
<div style="background:#FFF; margin:0 3px; font-size:11px; font-family:Verdana; color:#333; padding:5px 10px; overflow:hidden;">
这是内容区域，背景色为白色，如果想要跟标题那一样，就把background的颜色改为#E1E7E9，也就是跟第2个div的background颜色一样
</div>
</div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 1px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 1px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 2px; border:1px solid #B0BEC7; border-width:0 2px; background:#E1E7E9; height:1px; overflow:hidden;"></div>
<div style="margin:0 4px; background:#B0BEC7; height:1px; overflow:hidden;"></div>
</body>
</html>
来源：https://www.cnblogs.com/nine425/archive/2010/07/11/1775372.html