css3中关于Border的属性一共有三个：圆角border-radius,图片边框border-p_w_picpath,边框多颜色border-color,其中圆角border-radius是常用的一个属性。
一、圆角border-radius
1、语法
- border-radius ： none | <length>{1,4} [/ <length>{1,4} ]?
<length>： 由浮点数字和单位标识符组成的长度值。不可为负值。
2、变化说明
border-radius是一种缩写方法。如果“/”前后的值都存在，那么“/”前面的值设置其水平半径，“/”后面值设置其垂直半径。如果没有“/”，则水平和垂直半径相等。另外其四个值是按照top-left、top-right、bottom-right、bottom-left的顺序来设置的其主要会有下面几种情形出现：
1)border-radius: [ <length>{1,4} ];
这里只有一个值，那么top-left、top-right、bottom-right、bottom-left四个值相等
2)border-radius:[ <length>{1,4} ] [ <length>{1,4} ] ;
这里设置两个值，那么top-left等于bottom-right，并且取第一个值；top-right等于bottom-left，并且取第二个值
3)border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];
如果有三个值，其中第一个值是设置top-left;而第二个值是top-right和bottom-left并且他们会相等,第三个值是设置bottom-right
4)border-radius:[ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ] [ <length>{1,4} ];
如果有四个值，其中第一个值是设置top-left;而第二个值是top-right,第三个值bottom-right,第四个值是设置bottom-left
前面，我们主要看了border-radius的缩写格式，其实border-radius和border属性一样，还可以把各个角单独拆分出来，也就是以下四种写法，这里我规纳一点，他们都是先Y轴再X轴，具体看下面：
- border-top-left-radius: <length> <length> //左上角
- border-top-right-radius: <length> <length> //右上角
- border-bottom-right-radius:<length> <length> //右下角
- border-bottom-left-radius:<length> <length> //左下角
border-radius只有在以下版本的浏览器：Firefox4.0+、Safari5.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式，对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，比说Mozilla内核需要加上“-moz”，而Webkit内核需要加上“-webkit”等。（border-radius一定要放置在-moz-border-radius和-webkit-border-radius后面）
圆角参考传送门
二、图片边框border-color
1、css2的border-color属性应用
- border-color: <color>
-
- border-top-color: <color>
- border-right-color: <color>
- border-bottom-color:<color>
- border-left-color: <color>
2、css3的border-color属性
首先css3的border-color属性现在只有Firefox3.0+浏览器支持，
所以css3的border-color属性只有一种写法：
- -moz-border-top-colors: red blue white white black;
- -moz-border-right-colors: red blue white white black;
- -moz-border-bottom-colors: red blue white white black;
- -moz-border-left-colors: red blue white white black;
这样同一属性下可以写多个颜色值，由外而内地产生渐变的效果。
border-color参考传送门
三、边框多颜色border-p_w_picpath
1、语法
- border-p_w_picpath ： none | <p_w_picpath> [ <number> | <percentage>]{1,4} [ / <border-width>{1,4} ]? [ stretch | repeat | round ]{0,2}
简单的来介绍一下border-p_w_picpath的参数，让大家在脑海中有下初步的概念：
1)none:是border-p_w_picpath的默认值，如果取值为none时，表示边框无背景图片；
2)<p_w_picpath>：设置border-p_w_picpath的背景图片，这个跟background-p_w_picpath一样，使用绝对或相对的url地址，来指定背景图片；
3)<number>：number是一个数值，用来设置边框的宽度，其单位是px，其实就像border-width一样取值，可以使用1~4个值，其具体表示四个方位的值，大家可以参考border-width的设置方式；
4)<percntage>：percntage也是用来设置边框的宽度，跟number不同之处是，其使用的是百分比值来设置边框宽度；
5)stretch,repeat,round:他们是用来设置边框背景图片的铺放方式，类似于background-position，其中stretch是拉伸，repeat是重复，round是平铺，stretch为默认值。
2、示例
可以把border-p_w_picpath分解为：
1)引入图片：border-p_w_picpath-source；
- border-p_w_picpath-source:url(p_w_picpath url);
2)切割引入的图片：border-p_w_picpath-slice；
- border-p_w_picpath-slice: [ <number> | <percentage>]{1,4}&& fill?
3)边框的宽度：border-p_w_picpath-width；
- border-p_w_picpath-width: [ <length> | <percentage> | <number> | auto ]{1,4}
4)图片的排列方式：border-p_w_picpath-repeat。
- border-p_w_picpath-repeat: [ stretch | repeat | round ]{1,2}
stretch：拉伸效果
repeat：水平重复效果
round：水平平铺效果
border-p_w_picpath参考传送门
