一、第一层次（复合样式）
<style> p.one{border:1px solid black;} /*边框:1像素 实心的 黑色；*/ </style> <body> <p class="one">边框:1像素 实心的 黑色;</p> </body>
运行效果图:
二、第二层次（边框三要素：宽度、样式、颜色）
2.1、边框宽度
<style> p.one{ border:1px solid black; border-width:10px 20px 30px 40px; } /*边框宽度:上 右 下 左；*/ </style> <body> <p class="one">边框宽度:上 右 下 左；</p> </body>
运行效果图:
2.2、边框样式
<style> p{border-width:10px;} p.none {border-style:none;} p.dotted {border-style:dotted;} p.dashed {border-style:dashed;} p.solid {border-style:solid;} p.double {border-style:double;} p.groove {border-style:groove;} p.ridge {border-style:ridge;} p.inset {border-style:inset;} p.outset {border-style:outset;} p.hidden {border-style:hidden;} </style> <body> <p class="none">无边框none</p> <p class="dotted">虚线边框dotted</p> <p class="dashed">虚线边框dashed</p> <p class="solid">实线边框solid</p> <p class="double">双边框double</p> <p class="groove"> 凹槽边框groove</p> <p class="ridge">垄状边框ridge</p> <p class="inset">嵌入边框inset</p> <p class="outset">外凸边框outset</p> <p class="hidden">隐藏边框hidden</p> </body>
运行效果图：
2.3、边框颜色
支持三种形式：name - 指定颜色的名称，如 "red" ； RGB - 指定 RGB 值, 如 "rgb(255,0,0)" ；Hex - 指定16进制值, 如 "#ff0000"。
另外，也可以设置为"transparent"，与父级颜色一致，可以理解为透明。
<style> p{width:400px;border-width:10px;border-style:solid;} p.red {border-color:red;} p.green {border-color:rgb(0,155,0);} p.blue {border-color:#3366FF;} </style> <body style="background: #ccc;"> <p class="red">红色边框</p> <p class="green">绿色边框</p> <p class="blue">蓝色边框</p> </body>
运行效果图：
2.4、边框的宽度|样式|颜色，分别可以设置一至四个值。下面以边框样式为例：
三、第三层次（方向）
<style> p{width:400px;height:200px;} /*方向复合样式*/ .one{ border-top:1px solid #000; border-right:2px dotted red; border-bottom:3px solid deeppink; border-left:4px dashed green; } /*方向分层样式 可以同样的方式设置*/ .two{ border-top-width:1px; border-top-style:solid; border-top-color:#000; border-right-width:2px; border-right-style:dotted; border-right-color:red; border-bottom-width:3px; border-bottom-style:solid; border-bottom-color:deeppink; border-left-width:4px; border-left-style:dashed; border-left-color:green; } </style> <body> <p class="one">方向复合样式</p> <p class="two">方向分层样式 可以同样的方式设置</p> </body>
运行效果图：
四、注意事项
在【同一个容器】下四条边框【相邻】且【颜色不一样时】,会出现梯形。
<style> div{ width: 200px; height: 70px; border-width: 20px; border-style: solid; border-color: yellow green blue black; } </style>
运行效果如图：
利用边框的这一特性，我们可以做出三角形。
<style> div{ width: 0; height: 0; overflow: hidden; border-width: 100px; border-color: transparent transparent #ccc transparent;
border-style: dashed dashed solid dashed; } </style>
运行效果如图：
五、兼容
1、边框宽度（border-width）、边框颜色（border-color）、边框方向（border-top|right|bottom|left）以及复合样式|分层样式，全兼容。
2、边框样式（border-style）：
2.1、IE6支持solid、dashed、2px以上的dotted(1px不支持，截图平铺解决)、3px以上的double(1px和2px不支持，截图平铺解决)，3D样式需要设置宽度才能更好的显示。
2.2、标准浏览器以及IE7以上，支持solid、dashed、dotted、3px以上的double(1px和2px不支持，截图平铺解决)，3D样式需要设置宽度才能更好的显示。