一、基本的圆角边框
在HTML中，创建基本的圆角边框主要依靠CSS border-radius属性，该属性值设置四个圆角半径的大小，如下面代码的例子所示：
<div style="border:2px solid #C0C0C0;border-radius:10px">This is an example</div>
在上述代码的例子中，我们设定了一个宽度为2px的实线边框，在此基础上，为该边框设置一个半径为10px的圆角效果。
此外，如果我们想要设置单独一个角的圆角效果，也可以通过如下代码实现：
<div style="border:2px solid #C0C0C0;border-top-left-radius:10px;border-top-right-radius:20px">This is an example</div>
上述代码中，我们通过在border-top-left-radius和border-top-right-radius两个属性中分别设置两个角的半径大小，同时保持另外两个角的默认值，实现了单独角落的圆角效果。
二、更丰富的圆角边框
如果单一的圆角效果不能满足你的需求，你可以设定不同的边框颜色和样式，以及不同圆角的大小和位置，从而实现更为丰富多彩的边框效果。
下面的代码演示了一个更丰富的圆角边框效果：
<div style="border:10px dotted yellowgreen;border-top-left-radius:50px;border-bottom-right-radius:30px;border-top:20px solid gray">This is an example</div>
这个例子中，我们设置了边框的样式为虚线，颜色为yellowgreen，宽度为10px，同时将左上角和右下角分别设置成了50px和30px的圆角，将顶部的边框宽度设置为20px，颜色为gray。
三、进一步优化圆角边框效果
为了让圆角边框更加适应不同的网页设计，我们还可以按照自己的需求进行更进一步的优化。下面几种优化方式可以让你更好的掌控圆角边框的效果。
1、使用CSS3动画效果
CSS3提供了animate属性，可以让边框的大小、颜色和形状实现流畅的过渡效果。
/*设置过渡时间和效果*/
<style>
div{
border:1px solid #CCC;
border-radius:10px;/*设置当前边框为圆角*/
-webkit-transition:all .5s ease-in-out 0s;/*设置过渡时间和效果*/
-moz-transition:all .5s ease-in-out 0s;
-o-transition:all .5s ease-in-out 0s;
transition:all .5s ease-in-out 0s;
}
/*鼠标移入显示效果*/
div:hover {
border:1px solid #000;
padding:20px;
border-radius:40px;/*边框更加圆润*/
box-shadow:#000 5px 5px 5px;/*增加投影效果*/
}
</style>
/*图形实现*/
<div>
<p>content:</p>
</div>
2、使用边框图片
你可以通过设置边框的背景图片，实现各种奇特的效果。下面是一个生成波浪纹边框的例子：
/*设置边框背景图片*/
<style>
div{
background:url("bg.jpg") repeat-x center 35px;/*设置边框背景图片*/
border:1px solid #CCC;
-moz-border-image:url("bg.jpg") 27 27;
-o-border-image:url("bg.jpg") 27 27;
-webkit-border-image:url("bg.jpg") 27 27;
border-image:url("bg.jpg") 27 27 fill;
padding:30px;
margin:30px;
}
</style>
/*图形实现*/
<div>
<p>content:</p>
</div>
3、使用多重边框
通过设置多个边框，你可以让原本简单的圆角边框更具有立体感和深度感。
/*设置多重边框*/
<style>
div {
padding:20px;
border:10px solid #CCC;
background:#EEE;
position:relative;
}
/*阴影效果*/
div:after {
content:"";
position:absolute;
z-index:-1;
top:15px;
left:15px;
right:-15px;
bottom:-15px;
background-color:#333;
-moz-box-shadow:0 0 15px #333;
-webkit-box-shadow:0 0 15px #333;
box-shadow:0 0 15px #333;
}
/*蓝色边框*/
div:before {
content:"";
position:absolute;
z-index:-2;
top:10px;
left:10px;
right:-10px;
bottom:-10px;
background-color:blue;
border:5px solid blue;
}
</style>
/*图形实现*/
<div>
<p>content:</p>
</div>
总结
通过CSS和HTML，我们可以创建出各类各样，效果醒目的圆角边框。但是，在实际的网页设计中，我们需要根据具体的设计要求，选择最为适合的圆角边框方案，达到更好的设计效果。
