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

我通常得到圆角只是与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上都能很好地工作。

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

在Safari, Chrome, Firefox > 2, IE > 8和Konquerer(可能还有其他)中，你可以在CSS中使用border-radius属性。由于它还不是规范的正式部分，请使用特定于供应商的前缀…

例子

#round-my-corners-please {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
}

JavaScript解决方案通常会添加一堆小的div来使它看起来圆角，或者使用边框和负边距来制作1px的缺口角。有些还可能在IE中使用SVG。

在我看来，CSS的方式更好，因为它很简单，并且在不支持它的浏览器中会优雅地降级。当然，这只是客户端在不受支持的浏览器(如IE < 9)中不强制执行它们的情况。

总有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+图像的流畅圆角技术的文章:

使用CSS和图像的圆角盒子-第2部分

这个技巧的概述是使用嵌套的div和背景图像重复和定位。对于固定宽度的布局(固定宽度可拉伸的高度)，你需要三个div和三张图片。对于流体宽度布局(可拉伸宽度和高度)，您需要9个div和9张图像。有些人可能会认为这太复杂了，但恕我直言，这是有史以来最简洁的解决方案。没有黑客，没有JavaScript。