我个人最喜欢这个解决方案，它的.htc允许IE渲染弯曲的边界。

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

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

不久前我写了一篇关于这方面的博客文章，想要了解更多信息，请看这里

<div class="item_with_border">
    <div class="border_top_left"></div>
    <div class="border_top_right"></div>
    <div class="border_bottom_left"></div>
    <div class="border_bottom_right"></div>
    This is the text that is displayed
</div>

<style>
    div.item_with_border
    {
        border: 1px solid #FFF;
        postion: relative;
    }
    div.item_with_border > div.border_top_left
    {
        background-image: url(topleft.png);
        position: absolute;
        top: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_top_right
    {
        background-image: url(topright.png);
        position: absolute;
        top: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_left
    {
        background-image: url(bottomleft.png);
        position: absolute;
        bottom: -1px;
        left: -1px;     
        width: 30px;
        height: 30px;
        z-index: 2;
    }
    div.item_with_border > div.border_bottom_right
    {
        background-image: url(bottomright.png);
        position: absolute;
        bottom: -1px;
        right: -1px;        
        width: 30px;
        height: 30px;
        z-index: 2;
    }   
</style>

它运行得很好。不需要Javascript，只需CSS和HTML。用最小的HTML干扰其他东西。它与Mono发布的非常相似，但不包含任何ie6的特定hack，经过检查，似乎根本不起作用。另外，另一个技巧是使每个角落图像的内部部分透明，这样它就不会挡住角落附近的文本。外部部分不能是透明的，这样可以掩盖非圆角div的边框。

此外，一旦CSS3广泛支持border-radius，这将是官方制作圆角的最佳方法。

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

Ruzee Borders是我发现的唯一一个基于javascript的反锯齿圆角解决方案，适用于所有主流浏览器(Firefox 2/3, Chrome, Safari 3, IE6/7/8)，也是唯一一个在圆角元素和父元素都包含背景图像时工作的解决方案。它还可以处理边界、阴影和发光。

更新的RUZEE。ShadedBorder是另一个选项，但是它缺乏从CSS中获取样式信息的支持。