在网页中很多修饰性线条都是由边框定义的，边框可以作修饰使用，也可以作为版块、对象分隔使用，元素的边框具有下面四个特点：
- 每个元素都包含4个方位的边框，如border-top（顶边）、border-right（右边）、border-bottom（底边）和border-left（左边），可以单独定义，也可以使用border属性统一定义边框样式。
- 独立定义边框的宽度，如border-width、border-top-width、border-right-width、border- bottom-width和border-left-width。也可以使用border-width属性统一定义边框的宽度。
- 独立定义边框的颜色，如border-color、border-top-color、border- right-color、border- bottom-color和border-left-color。也可以使用border-color属性统一定义边框的颜色。
- 独立定义边框的样式，如border-style、border-top-style、border-right-style、border- bottom-style和border-left-style。也可以使用border-style属性统一定义边框的样式。
定义宽度
定义边框的宽度有多种方法。简单说明如下：
- 方法1，直接在属性后面指定宽度值。
<style type="text/css"> border-bottom-width:12px;/*定义元素的底边框宽度为12px*/ border-top-width:0.2em; /*定义顶部边框宽度为元素内字体大小的0.2倍*/ </style>
- 方法2，使用关键字，如thin、medium和thick。thick比medium宽，而medium比thin宽。不同浏览器对此解析的宽度值也不同，有的解析为5px、3px、2px，有的解析为3px、2px、1px。
- 方法3，单独为元素的某条边设置宽度，可以使用border-top-width（顶边框宽度）、border-right-width（右边框宽度）、border- bottom-width（底边框宽度）和border-left-width（左边框宽度）。
- 方法4，使用border-width属性快速定义边框宽度，例如：
<style type="text/css"> border-width:2px;/*定义四边都为2px*/ border-width:2px 4px;/*定义上下边为2px，左右边为4px*/ border-width:2px 4px 6px;/*定义上边为2px，左右边为4px，底边为6px*/ border-width:2px 4px 6px 8px; /*定义上边为2px，右边为4px，底边为6px，左边为8px*/ </style>
【提示】
当定义边框宽度时，必须要定义边框的显示样式。由于边框默认样式为none，即不显示，所以仅设置边框的宽度，由于样式不存在，边框宽度也自动被清除为0。
定义颜色
定义边框颜色可以使用颜色名、RGB颜色值或十六进制颜色值。
【示例1】下面示例分别为元素的各个边框定义不同的颜色，演示效果如图5所示。
<style type="text/css">
#box {/*定义边框的颜色 */
height: 164px; /* 定义盒的高度 */
width: 240px; /* 定义盒的宽度 */
padding: 2px; /* 定义内补白 */
font-size: 16px; /* 定义字体大小 */
color: #FF0000; /* 定义字体显示颜色 */
border-style: solid; /* 定义边框为实线显示 */
border-width: 50px; /* 定义边框的宽度 */
border-top-color: #aaa; /* 定义顶边框颜色为十六进制值*/
border-right-color: gray; /*定义右边框颜色为名称值*/
border-bottom-color: rgb(120,50,20); /*定义底边框颜色为RGB值*/
border-left-color:auto; /*定义左边框颜色将继承字体颜色*/}
</style>
<div id="box"><img src="images/1.jpg" width="240" height="164" alt=""/></div>
图5 定义边框颜色
定义样式
边框样式是边框显示的基础，CSS2提供了下面几种边框样式：
- 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凸边。
【示例2】下面示例使用边框样式设计列表框样式，定义每个项目显示下划线，预览效果如图6所示。
<style type="text/css">
#box {/*<定义信纸的外框>*/
width: 500px;
height: 400px;
padding: 8px 24px;
margin: 6px;
border-style: outset; /* 定义信纸边框为3D凸边效果 */
border-width: 4px; /* 定义信纸边框宽度 */
border-color: #aaa; /* 定义信纸边框颜色 */
font-size: 14px;
color: #D02090;
list-style-position: inside; /* 定义列表符号在内部显示 */}
#box h2 {/*<定义标题格式>*/
padding-bottom: 12px;
border-bottom-style: double; /* 定义标题底边框为双线显示 */
border-bottom-width: 6px; /* 定义标题底边框宽度 */
border-bottom-color: #999; /* 定义标题底边框颜色 */
text-align: center;
color: #000000;}
#box li {
padding: 6px 0; /* 增加列表项之间的间距 */
border-bottom-style: dotted; /* 定义列表项底边框为点线显示 */
border-bottom-width: 1px; /* 定义列表项底边框宽度 */
border-bottom-color: #66CC66; /* 定义列表项底边框颜色 */}
</style>
<ol id="box">
<h2>边框样式应用</h2>
<li>none：默认值，无边框，不受任何指定的border-width值影响。</li>
<li>hidden：隐藏边框，IE不支持。</li>
<li>dotted：定义点线。</li>
<li>dashed：定义虚线。</li>
<li>solid：定义实线。</li>
<li>double：定义双线边框，两条线及其间隔宽等于指定的border-width值。</li>
<li>groove：根据border-color值定义D凹槽。</li>
<li>ridge：根据border-color值定义D凸槽。</li>
<li>inset：根据border-color值定义D凹边。</li>
<li>outset：根据border-color值定义D凸边。</li>
</ol>
IE预览效果
Firefox预览效果
图6 边框样式比较
在IE 和Firefox浏览器中分别进行预览，则效果存在细微区别，说明不同浏览器在解析相同的样式代码时显示效果也不完全相同。
【提示】
当同时定义边框样式、宽度和颜色时，分别输入代码有点繁琐，这时可以合并样式，且属性值顺序可以任意排列：
/*[边框样式代码简写]*/
#box { border:outset 4px #aaa; /*定义信纸边框样式*/}
#box h2 {border-bottom: 6px #999 double; /*定义标题底边框样式*/}
#box li {border-bottom: #66CC66 dotted 1px; /*定义列表项底边框样式*/}
【拓展】
元素的背景与边框有着某种特殊的关系。根据CSS规则，元素的背景不会超出边框的外边缘，由于平时定义边框宽度多为1、2像素，且多为实线，所以察觉不到背景深入到边框的外边缘。不过目前浏览器对此解释还存在争议。
【示例3】下面示例为盒子设计背景图像，然后设计边框为虚线显示，同时定义边框宽度为50像素，为方便观看。
<style type="text/css">#box {/* 查看边框与背景图像的关系 */ height: 200px; /* 定义盒子的高度 */ width: 200px; /* 定义盒子的宽度 */ background-image: url(images/2.jpg); /* 定义盒子的背景图像 */ border: 50px dotted red; /*定义边框样式为间隔显示*/} </style> <div id="box"></div>
在IE怪异模式下浏览，则背景没有伸入边框区域，且解析dotted样式为圆形，如图7所示。在Firefox中浏览，则背景伸入边框区域，且解析边框虚线样式也不同，如图8所示。
图7 IE解析边框虚线
图8 Firefox解析边框虚线
【提示】
在默认状态下，边框的宽度为medium（中型），这是一个相对宽度，一般为2～3像素。边框默认样式为none，即隐藏边框显示。边框默认颜色为前景色，即元素中包含文本的颜色，如果没有文字，则将继承上级元素所包含的文本颜色。
双线框由两条单线和中间的空隙组成，三者宽度之和等于边框的宽度。但是双线框的值分配也会存在一些矛盾，无法做到平均分配。如果边框宽度为3px，则两条单线与其间空隙分别为1px；如果边框宽度为4px，则外侧单线为2px，内侧和中间空隙分别为1px；如果边框宽度为5px，则两条单线宽度为2px，中间空隙为1px。其他取值依此类推。
行内元素边框
根据盒模型基本规则，任何元素都可以定义边框。但行内元素的边框显示效果有点特殊。下面结合示例进行简单说明。
第一，行内元素的上下边框高度不会影响行高，而且不受段落和行高的约束。
【示例4】下面示例在一段文本中包含一个span元素，利用它为部分文本定义特殊样式，设计顶部边框为80像素宽的红色实线，底部边框为80像素的绿色实线，如图9所示。
<style type="text/css">
p {/* 定义段落属性 */
margin: 50px; /* 定义段落的边界为50px */
border: dashed 1px #999; /* 定义段落的边框 */
font-size: 14px; /* 定义段落字体大小 */
line-height: 24px;/* 定义段落行高为24px */}
span {/* 定义段落内内联文本属性 */
border-top: solid red 80px;/* 定义行内元素的上边框样式 */
border-bottom: solid green 80px; /* 定义行内元素的下边框样式 */ color: blue;
}
</style>
<p> 寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处舟催发。执手相看泪眼，竟无语凝噎。念去去千里烟波，暮霭沉沉楚天阔。 <span>多情自古伤离别，更那堪冷落清秋节。</span>今宵酒醒何处?杨柳岸晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说? </p>
图9 定义行内元素上下边框效果
在IE 中浏览，可以看到上边框压住了上一行文字，并超出了段落边框，下边框压住了下一行文字，也超出了段落边框。
第二，行内元素的左右边框宽度会挤占左右相邻文本的位置，而不是压住左右两侧文本。左右边框会跟随文本流自由移动，移动时会紧跟行内元素前后，且不会出现断行现象，也就是说单个边框不会被分开显示在2行内。
【示例5】下面示例在一段文本中包含一个span元素，利用它为部分文本定义特殊样式，设计左侧边框为60像素的红色实线，右侧边框为20像素的蓝色实线，上下边框为1像素的红色实线。在IE中浏览，左右边框分别占据一定的位置，效果如图10所示。
<style type="text/css">
p {/* 定义段落属性 */
margin:20px;
border:dashed 1px #999;
font-size:14px;
line-height:24px;}
span {/* 定义段落内内联文本属性 */
border-left:solid red 60px;/*定义行内元素的左边框样式*/
border-right:solid blue 20px;/*定义行内元素的右边框样式*/
border-top:solid red 1px;/*定义行内元素的上边框样式*/
border-bottom:solid red 1px;/*定义行内元素的下边框样式*/
color:#aaa; /* 定义字体颜色 */}
</style>
<p> 寒蝉凄切，对长亭晚，骤雨初歇。都门帐饮无绪，留恋处舟催发。执手相看泪眼，竟无语凝噎。念去去千里烟波，暮霭沉沉楚天阔。 <span>多情自古伤离别，更那堪冷落清秋节。</span>今宵酒醒何处?杨柳岸晓风残月。此去经年，应是良辰好景虚设。便纵有千种风情，更与何人说? </p>
图10 定义行内元素左右边框效果
行内元素的盒模型比较特殊，它的形状也失去了基本矩形形状，有时由于多行显示会呈现为非矩形形状，在设计中需要用户留心这些差异。