CSS3中新增了圆角边框样式，可以将盒子变为圆角。
语法：
border-radius:length
例：
radius(半径）圆角原理： 设置一个length半径大小的圆与盒子相交，保留相交后的圆角。
有几个例子 分割线隔开html>
<head>
<title>css圆角效果</title>
<meta http-equiv="content-type" content="text/htmlcharset=gb2312">
<style type="text/css">
div.RoundedCorner{background: #9BD1FA}
b.rtop, b.rbottom{display:blockbackground: #FFFFFF}
b.rtop b, b.rbottom b{display:blockheight: 1pxoverflow: hiddenbackground: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1pxheight: 2px}
</style>
</head>
<body>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
无图片实现圆角框
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
<br>
<div class="RoundedCorner">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<br>无图片实现圆角框<br><br>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
</div>
........................................................
<style type="text/css">
.b1 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#9BD1FAmargin:0 5px}
.b2 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fff
border-right:2px solid #9BD1FAborder-left:2px solid #9BD1FAmargin:0 3px}
.b3 {height:1pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fff
border-right:1px solid #9BD1FAborder-left:1px solid #9BD1FAmargin:0 2px}
.b4 {height:2pxfont-size:1pxoverflow:hiddendisplay:blockbackground:#fff
border-right:1px solid #9BD1FAborder-left:1px solid #9BD1FAmargin:0 1px}
</style>
接着看页面代码：
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<br>ssadfsadfsdfdf</br>
<br>ssadfsadfsdfdf</br>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
当然你也可以用其他的标签<div>或者<span><a>之类，应该也是可以的
.............................................................................
<style type="text/css">
div#nifty{margin: 0 10%background: #9BD1FAwidth: 300pxword-break:break-all}
b.rtop, b.rbottom{display:blockbackground: #FFF}
b.rtop b, b.rbottom b{display:blockheight: 1pxoverflow: hiddenbackground: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1pxheight: 2px}
</style>
<center>
<div id="nifty">
<b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b>
<span style="font-size:16color:#ffffont-family:华文行楷">
家穷人丑一米四九，<br>
小学文化农村户口。<br>
破屋三间病猪一头，<br>
冷锅热灶老婆没有。<br>
今日上网广征女友，<br>
革命道路并肓携手。
</span>
<b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b></div>
..........................................
<style type="text/css">
#xsnazzy h1, #xsnazzy h2, #xsnazzy p {margin:0 10pxletter-spacing:1px}
#xsnazzy h1 {font-size:2.5emcolor:#fff}
#xsnazzy h2 {font-size:2emcolor:#06aborder:0}
#xsnazzy p {padding-bottom:0.5em}
#xsnazzy h2 {padding-top:0.5em}
#xsnazzy {background: transparentmargin:1em}
.xtop, .xbottom {display:blockbackground:transparentfont-size:1px}
.xb1, .xb2, .xb3, .xb4 {display:blockoverflow:hidden}
.xb1, .xb2, .xb3 {height:1px}
.xb2, .xb3, .xb4 {background:#cccborder-left:1px solid #08cborder-right:1px solid #08c}
.xb1 {margin:0 5pxbackground:#08c}
.xb2 {margin:0 3pxborder-width:0 2px}
.xb3 {margin:0 2px}
.xb4 {height:2pxmargin:0 1px}
.xboxcontent {display:blockbackground:#cccborder:0 solid #08cborder-width:0 1px}
</style>
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h1>圆角边框</h1>
<p>看看吧<br />http://www.ebookit.cn/index.html</p>
<h2>不使用图片的边框</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim
ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl
ut aliquip ex ea commodo consequat.</p>
<p>Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>
//网络转载…
.........................................................
<style type="text/css">
<!--
#ibox01 {
overflow: hidden
height: 1px
margin-right: 5px
margin-left: 5px
background-color: #CC0000
}
#ibox02 {
height: 1px
margin-right: 3px
margin-left: 3px
border-right-width: 2px
border-left-width: 2px
border-right-style: solid
border-left-style: solid
border-right-color: #CC0000
border-left-color: #CC0000
overflow: hidden
}
#ibox03 {
height: 1px
margin-right: 2px
margin-left: 2px
border-right-width: 1px
border-left-width: 1px
border-right-style: solid
border-left-style: solid
border-right-color: #CC0000
border-left-color: #CC0000
overflow: hidden
}
#ibox04 {
overflow: hidden
height: 1px
margin-right: 1px
margin-left: 1px
border-right-width: 1px
border-left-width: 1px
border-right-style: solid
border-left-style: solid
border-right-color: #CC0000
border-left-color: #CC0000
}
#ibox05 {
overflow: hidden
height: 1px
margin-right: 1px
margin-left: 1px
border-right-width: 1px
border-left-width: 1px
border-right-style: solid
border-left-style: solid
border-right-color: #CC0000
border-left-color: #CC0000
}
#boxcon {
border-right-width: 1px
border-left-width: 1px
border-right-style: solid
border-left-style: solid
border-right-color: #CC0000
border-left-color: #CC0000
}
.testlayer {
height: 200px
width: 300px
}
.testboxbg {
background-color: #666666
}
.testboxcon {
height: 190px
background-color: #666666
position: relative
}
-->
</style>
<div class="testlayer">
<div id="ibox">
<div id="ibox01" class="testboxbg"></div>
<div id="ibox02" class="testboxbg"></div>
<div id="ibox03" class="testboxbg"></div>
<div id="ibox04" class="testboxbg"></div>
<div id="ibox05" class="testboxbg"></div>
<div id="boxcon" class="testboxcon"></div>
<div id="ibox05" class="testboxbg"></div>
<div id="ibox04" class="testboxbg"></div>
<div id="ibox03" class="testboxbg"></div>
<div id="ibox02" class="testboxbg"></div>
<div id="ibox01" class="testboxbg"></div>
</div>
</div>
</body>
</html>
