div css圆角边框怎么设置？除了用图片的方法以外还有其他方法吗？

1、css圆角实现的方式有很多种，最简单最方便的是使用border-radius属性。或者使用圆角图片。

2、border-radius后面直接接数值。

3、图片圆角就是事先切除圆角图片，可以制作定高，或者定宽的div。

4、使用border-radius的优点是无序添加多余结构代码，但是对于低版本的浏览器支持有问题。使用图片圆角不会有兼容问题，但是会多出多余的代码和结构。

可以实现 ，代码如下，你只要放在一个HTML页面中，运行即可看到效果

<style type="text/css">

div#nifty{ margin: 0 10%background: #9BD1FA}

p {padding:10px}

div.rtop, div.rbottom{display:blockbackground: #FFF}

div.rtop div, div.rbottom div{display:blockheight: 1pxoverflow: hiddenbackground: #9BD1FA}

div.r1{margin: 0 5px}

div.r2{margin: 0 3px}

div.r3{margin: 0 2px}

div.rtop div.r4, div.rbottom div.r4{margin: 0 1pxheight: 2px}

</style>

<div id="nifty">

<div class="rtop"><div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div></div>

<p>无图片的圆角表格</p>

<div class="rtop"><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div></div>

</div>

上面这位兄台你的回答是COPY的吧，没有讲到重点不说，洋洋散散那么多字都是多余的，我给你写一句简单的代码。

CSS代码：

<style>

#myDiv {

border-radius: 4px /*这句就是重点，让边框变为圆角*/

border: 1px solid #CCC/*让边框变为1px宽度，直线，#CCC颜色*/

width: 500px

height: 500px

}

</sytle>

HTML代码：

<div id="myDiv">这是圆角矩形</div>

就是这么简单，你COPY过去就OK了。

另外说一句，这个圆角的属性是CSS3中的特性，在IE9以下以及非webkit和moz内核的浏览器下都是不行的（比如IE8、IE7、IE6），这些浏览器就只能使用图片达到圆角效果了。

纯手工制造，希望对你有帮助，有任何疑问可以继续追问。

---