<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>curvyCorners Demo</title>
<mce:style><!--
html,body{
height: 100%;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
background-color: #ccc;
}
/*下面是圆角矩形的css样式*/
div.roundedcorner { width: 200px; color:white;border: 2px solid #fff; }
div.roundedcorner .r {display:block;background: #fff}
div.roundedcorner .r b {display:block;height: 1px;overflow: hidden; }
div.roundedcorner .r b{}
div.roundedcorner .r .r1{margin: 0 5px}
div.roundedcorner .r .r2{margin: 0 3px}
div.roundedcorner .r .r3{margin: 0 2px}
div.roundedcorner .r .r4{margin: 0 1px}
div.roundeside .border{}
/*#3a6ea5为背景色，可修改成自己想要的颜色*/
div.roundedcorner , div.roundedcorner .r b {background:#3a6ea5; }
/*下面是圆角边框的css样式*/
div.roundeside{ width: 200px; }
div.roundeside .r {display:block;background: transparent;}
div.roundeside .r b {height: 1px;overflow: hidden;display:block; }
div.roundeside .r .r1{margin: 0 4px;}
div.roundeside .r .r2{margin: 0 3px;background: transparent;}
div.roundeside .r .r3{margin: 0 2px;background: transparent;}
div.roundeside .r .r4{margin: 0 1px;background: transparent;}
/*#3a6ea5为边框色，可修改成自己想要的颜色*/
div.roundeside .border,div.roundeside .r b{border-left: 1px solid #3a6ea5;border-right: 1px solid #3a6ea5;}
div.roundeside .r .r1{background: #3a6ea5;}
--></mce:style><style mce_bogus="1">html,body{
height: 100%;
text-align: center;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0px;
background-color: #ccc;
}
/*下面是圆角矩形的css样式*/
div.roundedcorner { width: 200px; color:white;border: 2px solid #fff; }
div.roundedcorner .r {display:block;background: #fff}
div.roundedcorner .r b {display:block;height: 1px;overflow: hidden; }
div.roundedcorner .r b{}
div.roundedcorner .r .r1{margin: 0 5px}
div.roundedcorner .r .r2{margin: 0 3px}
div.roundedcorner .r .r3{margin: 0 2px}
div.roundedcorner .r .r4{margin: 0 1px}
div.roundeside .border{}
/*#3a6ea5为背景色，可修改成自己想要的颜色*/
div.roundedcorner , div.roundedcorner .r b {background:#3a6ea5; }
/*下面是圆角边框的css样式*/
div.roundeside{ width: 200px; }
div.roundeside .r {display:block;background: transparent;}
div.roundeside .r b {height: 1px;overflow: hidden;display:block; }
div.roundeside .r .r1{margin: 0 4px;}
div.roundeside .r .r2{margin: 0 3px;background: transparent;}
div.roundeside .r .r3{margin: 0 2px;background: transparent;}
div.roundeside .r .r4{margin: 0 1px;background: transparent;}
/*#3a6ea5为边框色，可修改成自己想要的颜色*/
div.roundeside .border,div.roundeside .r b{border-left: 1px solid #3a6ea5;border-right: 1px solid #3a6ea5;}
div.roundeside .r .r1{background: #3a6ea5;}</style>
<div class="roundedcorner" ><div >样式1</div><div style="border: 3px solid #3a6ea5;background: #fff;color:#000" mce_style="border: 3px solid #3a6ea5;background: #fff;color:#000">具体内容<br/>wefwea</div></div>
<br/>
<div class="roundedcorner" id=round1><div style="padding: 3px" mce_style="padding: 3px">样式1</div></div>
<br/>
<div class="roundedcorner" id=round1><div style="padding: 3px" mce_style="padding: 3px">样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/></div></div>
<br/>
<div class="roundeside" id=round1><div>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/>样式1fwaelfwefwae<br/></div></div>
<br/>
<div class="roundeside" id=round1><div>样式1</div></div>
<mce:script type="text/javascript"><!--
function getElementsByClass(G, E, A) {
var D = new Array();
if (E == null) {
E = document
}
if (A == null) {
A = "*"
}
var C = E.getElementsByTagName(A);
var B = C.length;
var F = new RegExp("(^|s)" + G + "(s|$)");
for (i = 0, j = 0; i < B; i++) {
if (F.test(C[i].className)) {
D[j] = C[i];
j++
}
}
return D
}
function rc(o){
var rcdivs = getElementsByClass(o);
for(var i=0,l=rcdivs.length;i<l;i++)
{
rcdivs[i].innerHTML = ‘<b class="r"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><div class="border">‘
+ rcdivs[i].innerHTML
+ ‘</div><b class="r"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>‘;
}
}
rc("roundedcorner");
rc("roundeside");
// --></mce:script>
</body>
</html>
原文：http://www.cnblogs.com/Mr0909/p/4080934.html