1.边框圆角属性border-radius使用

作用：设置边框的圆角。

属性值：可以是像素值，或者百分比，百分比参考的是盒子整体宽度、高度的百分比。

示例1：

示例2：

示例3：

当border-radius属性值为盒子的宽高度的一半，它就是一个圆形，只要值取值为50px及以上都是该效果，不会再进行更改。可以说是50px是最终结果了，再加像素也是按照50px进行加载。

注意：但是如上示例3不是最好的画圆形的方式，因为它如果存在其他属性，例如内边距，我们还需要给border-radius属性加上改内边距的像素值。

示例4：

当border-radius的属性值设置为50%时，也是可以同样实现圆形效果。

2.单一属性

border-top-left-radius: 半径;border-top-right-radius: 半径;border-bottom-right-radius: 半径;border-bottom-left-radius: 半径;

3.简写方法

border-radius 相当于四个单一属性的简写方法，类似 padding 也可以有四种值的写法。border-radius: 左上角 右上角 右下角 左下角;border-radius: 左上角 右上角和左下角 右下角 ;border-radius: 左上角和右下角 右上角和左下角 ;border-radius: 四个角相同;

3.1border-radius四值法

3.2border-radius三值法

3.3border-radius二值法

3.4border-radius单值法

4./ 的属性值写法

border-radius 属性值中出现了 / 斜线，那么 / 前面可以设置水平方向四种值的写法，/ 后面可以设置垂直方向四种值的写法。

5.浏览器兼容

InternetExplorer8及以下版本浏览器不支持border-radius属性，其他浏览器都支持。