border-radius円角詳細

    

```

    ：
![border-radius:50%](http://upload-images.jianshu.io/upload_images/4021100-387bc7bd760de305.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

``border-radius:20px;``    ：
![border-radius:20px](http://upload-images.jianshu.io/upload_images/4021100-892b8c58b7435eb2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  20px         20px  ，         。
       ，         。

![border-radius:20px](http://upload-images.jianshu.io/upload_images/4021100-8c36d6e2844c0d1d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

      ：
``border-radius:20px 40px;``
``border-radius:20px 100px 50px;``
``border-radius:20px 100px 50px 10px;``
``border-radius:20px 100px / 50px 10px;``
``border-radius:20px 100px 40px 10px/ 50px 30px 70px 10px;``
  ：

![border-radius:20px 40px](http://upload-images.jianshu.io/upload_images/4021100-78567f1bbd1e35a6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![border-radius:20px 100px 50px](http://upload-images.jianshu.io/upload_images/4021100-5f45b8cc1b96d8a0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![border-radius:20px 100px 50px 10px](http://upload-images.jianshu.io/upload_images/4021100-b620e5899f4bc50b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![border-radius:20px 100px / 50px 10px](http://upload-images.jianshu.io/upload_images/4021100-da22e9dec92d9d88.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


![border-radius:20px 100px 40px 10px/ 50px 30px 70px 10px](http://upload-images.jianshu.io/upload_images/4021100-339eb23cd80419c9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  ：
``border-radius:20px;   //     ``
``border-radius:20px 40px;    //  &         &     ``
``border-radius:20px 100px 50px;   //         &            ``
``border-radius:20px 100px 50px 10px;   //                  ``
``border-radius:20px 100px / 50px 10px;   // X  / Y ``
``border-radius:20px 100px 40px 10px/ 50px 30px 70px 10px;  // X  / Y ``

>IE 9、Safari 5、Chrome 4 Firefox 4，      border-radius  ；
     Safari Chrome，  -webkit-border-radius  ；
     Firefox  -moz-border-radius  ；
       ，      -webkit-border-radius border-radius  。

border-top-left-radius:20 px;border-top-right-radius:20 px;border-bottom-left-radius:20 px;border-bottom-right-radius:20 px;

>       ，        。
 ：top left bottom right       ！