这是我最近做的一个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。

自从引入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

正如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，而不是在所有冒犯或费力。当你需要向两个方向扩展时，情况就会变得不稳定。有些解决方案将大量的divs堆叠在一起以实现这一目标。

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

除了上面提到的htc解决方案，这里还有其他解决方案和例子来实现IE圆角。

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