方法一：CSS3 <!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"><head><meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" /><meta http-equiv="Content-Language" content="utf-8" /><meta name="robots" content="all" /><meta name="author" content="Tencent-ISRD" /><meta name="Copyright" content="Tencent" /><title>Border-radius</title></head><body><div style="border-width: 1pxborder-style: solid-moz-border-radius: 11px-khtml-border-radius: 11px-webkit-border-radius: 11pxborder-radius: 11pxpadding:5px">在Firefox和Safari 3的浏览器里能看到圆角效果</div></body></html>方法二：CSS2 先做好四个圆角背景图，再定义四个角的类，如：.TL .TR .BL .BR。 四个角使用绝对定位，定位在层的左上、右上、左下、右下位置css3最简单：
border-radius:10px---4个角都是10px的圆角。
你也可以：border-radius:2px 3px 4px 5px分别对应容器的右上、右下、左下、坐上。
如果是css2的话，需要用到图片来实现圆角。
css3 中有个属性，直接设置圆角半径就可以了，border-radius。
再css2中，你这个图是没有简便的，设置个盒子，让背景色设置为你图的颜色，然后用ps将你图的上部分就是圆角部分 切割 作为01.jpg，下部分为 02.jpg。然后通过设置北京图片的方式 让02.jpg 设置为 background:url(02.jpg) no-repeat left bottom这样底部就出现圆角了，上半部分，设置h1的背景图片即可 和 下半部分是一样的。
如果圆角是渐变的，可以切下圆角的右上部分和右下部分 做合理的设计 实现滑动技术，也就是滑动门技术。
