使用CSS创建圆角边框的最好方法

带圆角的边框已经成为web 2.0和未来网站设计的同义词，本文介绍了一种简便的制作漂亮的圆角边框的办法。

首先声明，这个边框的宽度是固定的，不过它的高度可以随内容大小自由伸展，具体步骤如下：

Step 1
使用photoshop或者其他你喜欢的图形编辑软件，创建一个带圆角的框，宽度和高度取你认为的合适的尺寸，做出来的样子应该和下面差不多，

Step 2
把图片切割成两部分，上和下，上面部分的高度刚好够放box的标题，现在出来了以下两个图片，

Step 3
增加下面部分那个图片的高度以让它能够容纳足够多的内容，图片又变成了，

好了，现在图片已经全部准备就绪，现在是CSS部分，

HTML部分

<div id=box1>

<div> <div>My First Box</div> </div>

<div> <div>With some content</div></div>

</div>

添加以下CSS声明到你的css文件里面去，

.boxtop{ /*make this the same size as the top image*/ display:block; width:267px; height:48px;

/*set the image as a background*/ background-position:left top; background-repeat:no-repeat; background-image:url(images/top.gif); }

.topcontent{ /*set the font style for the box title*/ font-family:arial; font-size:16pt; color:white; /*shift the title down a bit and center it*/ padding-top:10px; text-align:center; }

 .boxbottom{ /*make this the same width as the bottom image*/ /*don’t set the height as this needs to be flexible*/ display:block; width:267px; /*set the image as a background*/ background-position:left bottom; background-repeat:no-repeat; background-image:url(images/bottom.gif); }

.maincontent{ /*set the font style for the main content*/ color:white; font-family:arial; font-size:12pt; display:block; /*align the main content nicely*/ padding-left:20px; padding-bottom:40px; padding-right:30px; }

ok，这就是全部了，示例可以看这里cornersdemo.htm。