Traditional fillet generation scheme, must be used more than one picture as a background pattern. CSS3 appears that we no longer have to waste time to make these pictures, and need only border-radius properties, browser support IE 9, Opera 10.5, Safari 5, Chrome 4 and Firefox 4.
1 border-radius properties
CSS3 rounded simply set a property: border-radius (meaning "border-radius"). Provide a value for this property, you can set the radius of the four rounded corners simultaneously. All legitimate CSS metrics can be used: em, px, percentages and so on. For example, following is a block div (width and height are 200px, dark green background, borders to 2px gray solid line), as follows:
Achieve the effect shown in Figure 1:
Figure 1 box original style
Now set to 50% of its rounded corners, to increase css border-radius: 50%, CSS code is as follows:
Here by setting the attribute value fillet 50%, i.e., while the "horizontal radius" of each fillet and "vertical radius" are set to 50%, to achieve a final round. as shown in picture 2:
FIG 2 is set at 50% of the corners are rounded as box
It can be set border-radius values simultaneously 1-4. (Think about our previous margin and padding) If you set a value that represents the four rounded corners use this value. If two values, using the left and right corners indicates the first value, top right and bottom left using the second value. If three values, a first value using the upper left corner, top right and bottom left using the second value, the third value using the lower right corner. If four values, corresponding to the upper left corner in turn, top right, bottom right, bottom left (clockwise order).
Now we come to box the border-radius property to the value of two border-radius: 50px 25px, take a look at the effect of its implementation, CSS code is as follows:
Realization of rounded corners, and the upper-left corner of the box to the bottom right corner radius 50px, the upper right corner and bottom left corner radius to 25px. As shown in Figure 3:
FIG 3 is a set of two values of the border-radius box
再来为box的border-radius属性设置三个值border-radius: 50px 10px 25px，来看看它的实现效果，CSS代码如下：
实现的圆角效果，将box的左上角的圆角半径设为50px，右上角和左下角的圆角半径设为10px，右下角圆角半径设为25px。如图4所示：
图4 为box的border-radius设置三个值
最后我们为box的border-radius属性设置四个值border-radius: 50px 10px 25px 0，来看看它的实现效果，CSS代码如下：
实现的圆角效果，将box的左上角的圆角半径设为50px，右上角的圆角半径设为10px，左下角的圆角半径设为25px，右下角圆角半径设为0。如图5所示：
图5 为box的border-radius设置四个值
2 单个圆角的设置
除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：
（1）border-top-left-radius
（2）border-top-right-radius
（3）border-bottom-right-radius
（4）border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径。
现在，我们为单独为box的左上角设定50px的圆角，来看看它的实现效果，CSS代码如下：
实现的圆角效果，将box的左上角的圆角半径设为50px。如图6所示：
图6 为box设置左上角的圆角
虽然各大浏览器都支持border-radius，但是在某些细节上，实现都不一样。当四个角的颜色、宽度、风格（实线框、虚线框等）、单位都相同时，所有浏览器的渲染结果基本一致；一旦四个角的设置不相同，就会出现很大的差异。另外，并非所有浏览器，都支持将圆角半径设为一个百分比值。
Therefore, the safest approach is to style and width of each fillet border, are set to the same value, and avoid the use of percentage value.