在盒子模型中，盒子的边框是其重要的样式，通过边框我们可以很方便地看出盒子的长宽以及大小。边框的特性可以通过边框线，边框的宽度及颜色来呈现。
1，边框线
边框线指的是边框线条的样式，包括实线，虚线，点划线等。其具体的使用如下：
border-style : none | hidden | dotted | dashed | solid | double | groove |ridge | inset | outset
例：
div { width:300px; height:100px; border-style:solid; ｝
在这里我们将一个长为300px，宽为100px的盒子设置了实线的边框，在默认的情况下边框也为实线。
我们也可以为某一个盒子设置多种不同的边框。此时要注明所要设置的边框的位置。如：border-top-style 设置上边框线
border-bottom-style 设置下边框线
border-left-style 设置左边框线
border-right-style 设置右边框线
2，宽度
设置边框的宽度可以使盒子的边框更加具有多样性，也方便了我们的观察。
border-width : medium | thin | thick | length
同边框线一样，要为一个盒子设置多个不同的边框宽度，要用到下面的语法：
border-top-width 设置上边框宽度
border-bottom-width 设置下边框宽度
border-left-width 设置左边框宽度
border-right-width 设置右边框宽度
同时边框宽度的设置可以表现出不同的效果，例：
div{ width:0; height: 0;
border-top: 100px solid #000;
border-right: 100px solid ransparent;
border-left: 100px solid transparent;
}
这里通过将盒子的宽高设置为0，并为其添加边框的宽度及颜色，从而实现了一个倒三角形图案的效果。
3，颜色
设置边框的颜色使用border-color样式：
border-color : color
例：
div{width:200px;height:200px;border-color:black;border-width:2px;}
其属性值为一表现颜色的值，即英文单词或#ffffff和grb（0~255,0~255,0~255）；其不同位置边框颜色的设置与上面的类似，在此不再赘述。
通常对于边框样式的设置我们直接使用简写的方式，即：
border : border-width || border-style || border-color
这里面的三个值依次为宽度，线型和颜色，它们的顺序可以更改。其中边框的宽度必须设置值，否则在网页中看不到效果。其它两种在不设置的情况下，取默认值，及黑色的实线。
4，圆角
圆角是CSS3中新增加的边框样式，通过它，我们可以将盒子模型的外观设置得更加多样化。其用法如下：
border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
其属性值有1到4个不等，依次表示的是从左上角开始沿顺时针方向旋转的4个圆角的半径。
例：
div{ border-radius: 5px 4px 3px 2px; }
同时也可以设置每个圆角的垂直半径和水平半径，用斜杠隔开。
例：
div{ border-radius: 10px 20px 30px 40px / 5px 10px 15px 20px; }
在这里对于圆角的半径做一下具体说明：
我们在确定了盒子模型中的一个角时，以其为中心点，向垂直方向平移的距离即为垂直半径，向水平方向的位移即为水平半径。具体的位移方向以盒子的中心方向为正。由此可以确定边框上的两个点，这两个点即为盒子圆角上弧线的起始点与终点。
5，盒子阴影
前面我们了解到文字的阴影效果，作为盒子模型自然也有其阴影效果。具体用法如下：
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
其中后四个值是可选的。通常情况下，我们也为其设置了模糊半径即阴影颜色，这样盒子模型的阴影效果更加明显。
例：
div{ box-shadow: 5px 5px 5px rgba(0, 0, 0, .6); }
对于其中的投影方式，一般不取值的情况下，它是指的向外投影，若对其经行取值，其值应为inset，即向内投影。
例：
div{ box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6) inset; }
阴影的模糊半径是表现阴影的效果的度量，其值取得越大，阴影效果表现得越明显。
６，边框图片
在css3中新增了边框的图片样式，这使得边框的表现效果更加丰富。其具体语法如下：
border-image：<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat'>
其中border-image-slice ： 是一个数值或百分比，不需要带单位（特指px）
例：
.test { border: 10px solid gray; border-image: url(test.png) 10/10px; }
通过边框图片的设置，我们可以做到更多边框的绚丽效果。
来源：http://www.cnblogs.com/wuxiaoshang/p/5765707.html