总有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;
}

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

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

当然，如果它是一个固定的宽度，它是超级容易使用CSS，而不是在所有冒犯或费力。当你需要向两个方向扩展时，情况就会变得不稳定。有些解决方案将大量的divs堆叠在一起以实现这一目标。

我的解决方案是告诉设计师，如果他们想使用圆角(暂时)，它需要一个固定的宽度。设计师喜欢圆角(我也是)，所以我觉得这是一个合理的妥协。

Opera目前还不支持border-radius(显然在版本10之后才会支持)。同时，您可以使用CSS设置SVG背景来创建类似的效果。

总有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;
}

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

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

正如Brajeshwar所说:使用border-radius css3选择器。现在，您可以分别为基于Mozilla和Webkit的浏览器应用-moz-border-radius和-webkit-border-radius。

那么，ie浏览器会发生什么呢?微软有许多行为使ie浏览器有一些额外的功能，并获得更多的技能。

这里:一个.htc行为文件，用于从CSS中的border-radius值获取圆角。为例。

div.box {
    background-color: yellow; 
    border: 1px solid red; 
    border-radius: 5px; 
    behavior: url(corners.htc);
}

当然，行为选择器不是一个有效的选择器，但你可以把它放在一个不同的css文件与条件注释(仅适用于IE)。

行为HTC文件

我建议使用背景图片。其他方法就没有这么好了:没有抗锯齿和无意义的标记。这不是使用JavaScript的地方。