编辑器，我用的NOTEpad++
安装浏览器的电脑，IE9+或其他
下图是我制作的示例原型，为方便演示，我将样式写在了头部信息当中：
顾名思义，radius中译为‘半径、园径’。首先我们来看看盒子的某一个角的圆角效果，盒子的角分为左上、右上、左下、右下四个，相应的各角都有各自设置圆角的方法。参看下图，代码分别对应了左上角 右上角 左下角 右下角四个角的圆角，以border-top-left-radius为例后面跟随像素单位的长度。【请注意：不可写成border-left-top-radius，其它同】
border-top-left-radius:20px与border-top-left-radius：20px 60px;当border-top-left-radius其实是有可以去两个单位长度的数值的，第一个长度表示的是圆角的水平半径，第二个长度值则表示圆角的垂直半径。如果border-top-left-radius取值只有一个的话，此时默认的设置为水平半径=水质半径（即半圆）
通常情况下，我们比较少单独的为四个角设置不同的圆角半径，更多的我们是使用四个角效果统一的圆角半径写法：border-radius。当然border-radius也可以为各角设置不同的半径，下面就来看看。border-radius取一个值。下图示例，采用了border-radius：20px，为盒子的四个角设置了同为20px半径的圆角，这种效果我们会看起来很舒服，很协调。
border-radius取两个值。border-radius：20px 40px;同盒子的margin/padding属性一样，两个值意味着上下是一样的，左右是一样的，当然圆角没有上下之分，它是以左上角为起始点的。这就意味着盒子的左上-右下圆角是相同的，右上-左下的圆角是一样的。
border-radius取3个值。border-radius：20px 40px 60px；依旧同margin/padding，他意味着左上圆角半径为20px,右上和左下均为40px，右下为60px，看下图。
border-radius取4个值。border-radius：10px 30px 60px 90px；这种情况相当于分别给盒子的四个设置了圆角半径，顺序依次为左上-右上-右下-左下，效果如图：
前面我们说到了border-radius分别取1-4个值的情况，在这种情况下默认的是圆角的水平和垂直半径相等。对于当个的圆角设置圆角半径可以这样写：border-top-left-radius：20px 40px;那对于border-radius如果要设置垂直半径应当怎么写呢？请看下面：border-radius：20px/40px;其中反斜杠前面的就是水平半径，后面的就是垂直半径了。当然你也可以这样写：border-radius：10px 30px 60px 90px/90px 60px 30px 10px这样可以分别设置每个角的垂直和水平的圆角半径，相信挺容易的吧。
关于兼容的说明：目前大部分主流浏览器都已经支持了这一属性Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式，但对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，Mozilla内核需要加上“-moz-”，而Webkit内核需要加上“-webkit-“，而Opera的需要加上“-0-”。
相信看了这么多你一定会对圆角有比较的了解了。