CSS 边框 border
边框(border)
边框（border）是围绕内边距和内容的一条或多条线。当把 border 定义为 1px 时可以看做是一条线，宽度超过 1px 时可以看做是多条线。
border 是个复合属性，常用的属性有宽度，颜色，样式及方位等。
边框宽度
“border-width”属性用于设定边框宽度。
| 取值 | 说明 |
|---|---|
| medium | 默认值，默认宽度 |
| thin | 小于默认宽度 |
| thick | 大于默认宽度 |
| 长度值 | 由浮点数字和单位标识符组成的长度值，不可为负值 |
例子：
#div1{ border-width: 1px 1px 2px 3px; }
该例子按照“上－右－下－左”顺序设定四个方位边框分别为“1px 1px 2px 3px”。同 margin 一样，该取值支持赋值简写，具体可参见《CSS 外边距 margin》赋值简写部分。
边框颜色
“border-color”属性用于设定边框颜色。
例子：
#div1{ border-color: #FFFFFF; }
同 border-color 一样，该取值支持赋值简写，可以分别设定各边属性。赋值简写内容具体可参见《CSS 外边距 margin》赋值简写部分。
边框样式
border-style 属性用于设定边框样式。
| 取值 | 说明 |
|---|---|
| none | 默认值，无边框，border-width 属性无效 |
| hidden | 隐藏边框，某些IE浏览器版本不支持 |
| dotted | 点线 |
| dashed | 虚线 |
| solid | 实线 |
| double | 双线边框，两条单线与其间隔的和等于设定的 border-width 值 |
| groove | 根据 border-color 的值画3D凹槽 |
| ridge | 根据 border-color 的值画3D凸槽 |
| inset | 根据 border-color 的值画3D凹边 |
| outset | 根据 border-color 的值画3D凸边 |
例子：
#div1{ border-style: dashed; }
提示
根据 CSS 规范，边框 border 是在背景之上的。也就是说，如果边框样式设置为点线或者虚线，那么边框空出的部分则会显示出背景来。
边框方位
“border”结合子属性用于表示4个方位。
| 属性 | 说明 |
|---|---|
| border-top | 设置元素上边框的样式 |
| border-right | 设置元素右边框的样式 |
| border-bottom | 设置元素下边框的样式 |
| border-left | 设置元素左边框的样式 |
各个方位属性还可以跟 widht、color、style 结合来设置各边属性。一些例子：
- border-top-color：设置上边框颜色
- border-bottom-style：设置上边框样式
border复合属性说明
边框的复合属性为边框的设置提供了灵活多变的设置条件，具体是使用复合属性还是使用单独的属性设置，要根据实际情况来决定。
使用复合属性的例子：
#div{ border: 1px dashed #999999; }
补充：DIV+CSS教程
