要让圆角发挥作用是多么复杂，甚至雅虎都不鼓励他们(见第一个项目符号)!当然，他们在那篇文章中只谈论了1像素的圆角，但有趣的是，即使是一家拥有他们专业知识的公司也得出结论，让他们大部分时间工作太痛苦了。

如果你的设计可以在没有它们的情况下存活，这就是最简单的解决方案。

我建议使用背景图片。其他方法就没有这么好了:没有抗锯齿和无意义的标记。这不是使用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)中不强制执行它们的情况。

随着对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;

正如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文件

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