HTML+CSS实现圆角矩形（不需要图片）——抄自GTalk

从GTalk的css模板里抠出来的东东 :P

道理其实很简单，架设矩形的圆角高度为4，那么由上到下依次是（单位px，所给出的边框宽度均为1px且颜色保持保持一致）：
高度为1，左右间隔均为5，仅有上方边框的div；
高度为1，左右间隔均为3，仅有左右边框的div；
高度为1，左右间隔均为2，仅有左右边框的div；
高度为1，左右间隔均为1，仅有左右边框的div；
左右间隔均为0，仅有左右边框的div——放置内容；
高度为1，左右间隔均为1，仅有左右边框的div；
高度为1，左右间隔均为2，仅有左右边框的div；
高度为1，左右间隔均为3，仅有左右边框的div；
高度为1，左右间隔均为5，仅有下方边框的div

废话少说，代码在此

css样式定义：

div.panel {...} {
  clear:both;
}
DIV.panel DIV.b0  {...} {
  height: 1px;
  font-size: 1px;
  overflow: hidden;
  margin: 0px 5px;
  border-top: 1px solid #938F5A;
}
DIV.panel DIV.b1  {...} {
  height: 1px;
  font-size: 1px;
  overflow: hidden;
  margin: 0px 5px;
  border-bottom: 1px solid #938F5A;
}
DIV.panel DIV.b2  {...} {
  height: 1px;
  font-size: 1px;
  overflow: hidden;
  margin: 0px 3px;
  border-left: 2px solid #938F5A;
  border-right: 2px solid #938F5A;
}
DIV.panel DIV.b3  {...} {
  height: 1px;
  font-size: 1px;
  overflow: hidden;
  margin: 0px 2px;
  border-left: 1px solid #938F5A;
  border-right: 1px solid #938F5A;
}
DIV.panel DIV.b4  {...} {
  height: 2px;
  font-size: 1px;
  overflow: hidden;
  margin: 0px 1px;
  border-left: 1px solid #938F5A;
  border-right: 1px solid #938F5A;
}
div.panel div.content  {...} {
  border-left: 1px solid #938F5A;
  border-right: 1px solid #938F5A;
  padding: 0px 5px;
  text-align: left;
  filter: progid:DXImageTransform.Microsoft.Gradient(gradientType='0',startColorStr='#FFFEEA',endColorStr='#F2F4CC');
  /**//*height:1px; */
  background-color:#fff;
}
div.panel div.content .caption  {...} {
  font-weight: bold;
  display: block;
  border-bottom: 1px solid #CDCDCD;
  margin: 0px 0px 1px 0px;
  padding:5px 0 0 0;
  width:100%;
}
DIV.panel DIV.t-o  {...} {
  background-color: #AD0910;
}
DIV.panel DIV.b-o  {...} {
  background-color: #F1F3CB;
}
DIV.panel DIV.clear  {...} {
  clear: both;
  height: 1px;
  overflow: hidden;
}
DIV.panel DIV.break  {...} {
  height: 1px;
  margin: 3px 0px 0px 0px;
  overflow: hidden;
}

HTML代码：

< div  class ="panel" >
   < DIV  class ="t-o b1" ></ DIV >
   < DIV  class ="t-o b2" ></ DIV >
   < DIV  class ="t-o b3" ></ DIV >
   < DIV  class ="t-o b4" ></ DIV >
   < DIV  class ="content" >
     <!--  这里放内容  -->
     < DIV  class =clear ></ DIV >
   </ DIV >
   < DIV  class ="b-o b4" ></ DIV >
   < DIV  class ="b-o b3" ></ DIV >
   < DIV  class ="b-o b2" ></ DIV >
   < DIV  class ="b-o b1" ></ DIV >
   < DIV  class ="break" ></ DIV >
</ div >