这是我最近做的一个HTML/js/css解决方案。在IE中，绝对定位有1px的舍入误差，所以你希望容器是偶数像素宽的，但这很干净。

HTML:

<div class="s">Content</div>

jQuery:

$("div.s")
.wrapInner("<div class='s-iwrap'><div class='s-iwrap2'>")
.prepend('<div class="tr"/><div class="tl"/><div class="br"/><div class="bl"/>');

CSS:

/*rounded corner orange box - no title*/
.s {
    position: relative;
    margin: 0 auto 15px;
    zoom: 1;
}

.s-iwrap {
    border: 1px solid #FF9933;
}

.s-iwrap2 {
    margin: 12px;
}

.s .br,.s .bl, .s .tl, .s .tr {
    background: url(css/images/orange_corners_sprite.png) no-repeat;
    line-height: 1px;
    font-size: 1px;
    width: 9px;
    height: 9px;
    position: absolute;
}

.s .br {
    bottom: 0;
    right: 0;
    background-position: bottom right;
}

.s .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}

.s .tl {
    top: 0;
    left: 0;
    background-position: top left;
}

.s .tr {
    top: 0;
    right: 0;
    background-position: top right;
}

图像只有18px宽，4个角都打包在一起。看起来像一个圆。

注意:您不需要第二个内包装，但我喜欢在内包装上使用边距，以便段落和标题的边距仍然保持边距折叠。 你也可以跳过jquery，只是把内部包装在html。

我通常得到圆角只是与css，如果浏览器不支持他们看到的内容与平角。如果圆角对你的网站不是很重要，你可以使用下面的线条。

如果你想使用相同半径的所有角，这是一个简单的方法:

.my_rounded_corners{
   -webkit-border-radius: 5px;
           border-radius: 5px;
}

但如果你想控制每一个角落，这是很好的:

.my_rounded_corners{
    border: 1px solid #ccc;

    /* each value for each corner clockwise starting from top left */
    -webkit-border-radius: 10px 3px 0 20px;
            border-radius: 10px 3px 0 20px;
}

正如你所看到的，在每一组中，你都有特定于浏览器的样式，在第四行中，我们以标准的方式声明，我们假设在未来，如果其他人(希望也是IE)决定实现这个功能，让我们的样式也为他们做好准备。

正如在其他回答中所说，这在Firefox, Safari, Camino, Chrome上都能很好地工作。

自从引入CSS3以来，使用CSS添加圆角的最好方法是使用border-radius属性。你可以阅读属性的规范，或者在MDN上获得一些有用的实现信息:

如果您使用的浏览器没有实现border-radius (Chrome pre-v4, Firefox pre-v4, IE8, Opera pre-v10.5, Safari pre-v5)，那么下面的链接详细介绍了一大堆不同的方法。找一个适合你的网站和编码风格的，然后使用它。

CSS设计:创建自定义角 &边界 CSS圆角'Roundup' 25圆角技术与CSS

总有JavaScript的方式(见其他答案)，但因为它是纯粹的样式，我有点反对使用客户端脚本来实现这一点。

我更喜欢的方式(虽然它有其局限性)，是使用4圆角图像，你将定位在你的盒子的4个角使用CSS:

<div class="Rounded">
  <!-- content -->
  <div class="RoundedCorner RoundedCorner-TopLeft"></div>
  <div class="RoundedCorner RoundedCorner-TopRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomRight"></div>
  <div class="RoundedCorner RoundedCorner-BottomLeft"></div>
</div>

/********************************
* Rounded styling
********************************/

.Rounded {
  position: relative;
}

.Rounded .RoundedCorner {
  position: absolute;
  background-image: url('SpriteSheet.png');
  background-repeat: no-repeat;
  overflow: hidden;

  /* Size of the rounded corner images */
  height: 5px;
  width: 5px;
}

.Rounded .RoundedCorner-TopLeft {
  top: 0;
  left: 0;

  /* No background position change (or maybe depending on your sprite sheet) */
}

.Rounded .RoundedCorner-TopRight {
  top: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px 0;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-TopRight {
  right: -1px;
}

.Rounded .RoundedCorner-BottomLeft {
  bottom: 0;
  left: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: 0 -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomLeft {
  bottom: -20px;
}

.Rounded .RoundedCorner-BottomRight {
  bottom: 0;
  right: 0;

  /* Move the sprite sheet to show the appropriate image */
  background-position: -5px -5px;
}

/* Hack for IE6 */
* html .Rounded .RoundedCorner-BottomRight {
  bottom: -20px;
  right: -1px;
}

如前所述，它有其局限性(圆角框后面的背景应该是普通的，否则角就不会与背景相匹配)，但它适用于其他任何东西。

更新:通过使用精灵表改进了实现。

随着对CSS3的支持在Firefox、Safari和Chrome的新版本中实现，看看“边界半径”也会有帮助。

-moz-border-radius: 10px;  
-webkit-border-radius: 10px;  
border-radius: 10px;

像任何其他CSS简写一样，上面也可以用扩展格式编写，从而实现左上角、右下角等不同的边界半径。

-moz-border-radius-topleft: 10px;  
-moz-border-radius-topright: 7px;  
-moz-border-radius-bottomleft: 5px;  
-moz-border-radius-bottomright: 3px;  
-webkit-border-top-right-radius: 10px;  
-webkit-border-top-left-radius: 7px;  
-webkit-border-bottom-left-radius: 5px;  
-webkit-border-bottom-right-radius: 3px;

不要使用CSS, jQuery已经被提到过好几次了。如果你需要完全控制你的元素的背景和边界，可以试试jquery背景画布插件。它在背景中放置了一个HTML5 Canvas元素，并允许你绘制你想要的每个背景或边界。圆角，渐变等等。