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>