注意：
可以为所有不同的边界设置不同的属性, 即顶部边界, 右侧边界, 底部边界和左侧边界。
CSS边框的属性：
边框样式：
border-style属性指定边框的类型。如果未设置边框样式, 则其他边框属性均无法使用。
以下是边框的类型：
* dotted –定义虚线边框
*虚线–定义虚线边框
* solid –定义实线边框
* double-定义一个双边框
*凹槽–定义3D凹槽边框。
* ridge-定义3D脊状边框。
* inset –定义3D插入边框。
* outset –定义3D起始边框。
*无-定义无边框
* hidden –定义隐藏边框
例子：
<!DOCTYPE html>
< html >
< head >
< style >
p.dotted {
border-style: dotted;
}
p.dashed {
border-style: dashed;
}
p.solid {
border-style: solid;
}
p.double {
border-style: double;
}
</ style >
</ head >
< body >
< h2 >The border-style Property</ h2 >
< p >lsbin</ p >
< p class = "dotted" >A dotted border.</ p >
< p class = "dashed" >A dashed border.</ p >
< p class = "solid" >A solid border.</ p >
< p class = "double" >A double border.</ p >
</ body >
</ html >输出如下：
边框宽度：
边框宽度设置边框的宽度。边框的宽度可以是px, pt, cm或细, 中, 粗。
例子：
<!DOCTYPE html>
< html >
< head >
< style >
p {
border-style: solid;
border-width: 8px;
}
</ style >
</ head >
< body >
< p >
lsbin</ p >
< p >
Border properties
</ p >
</ body >
</ html >输出如下：
边框颜色：
此属性用于设置边框的颜色。可以使用颜色名称, 十六进制值或RGB值设置颜色。如果未指定颜色, 则border会继承元素本身的颜色。
例子：
<!DOCTYPE html>
< html >
< head >
< style >
p {
border-style: solid;
border-color: red
}
</ style >
</ head >
< body >
< p >
lsbin</ p >
< p >Border properties:color
</ p >
</ body >
</ html >输出如下：
边框各边：
各个侧面可以设置为不同的属性。
语法如下：如果border属性具有4个值, 则。
border-style: solid dashed dotted double
Solid: top border
Dashed: right border
Dotted: bottom border
Double: left border例子：
<!DOCTYPE html>
< html >
< head >
< style >
p {
border-style: solid dashed dotted double;
border-color: red;
}
</ style >
</ head >
< body >
< p >lsbin</ p >
< p >
Border properties:color
</ p >
</ body >
</ html >输出如下：
语法如下：如果border属性具有3个值, 则：
border-style: solid dotted double
Solid:top border
Dotted: Left and right border
Double: bottom border例子：
<!DOCTYPE html>
< html >
< head >
< style >
p {
border-style: solid dashed dotted;
border-color: blue;
}
</ style >
</ head >
< body >
< p >lsbin</ p >
< p >
Border properties:color
</ p >
</ body >
</ html >输出如下：
语法如下：如果border属性具有2个值
border-style:solid dotted
Solid:top and bottom border
Dotted: right and left border例子：
<!DOCTYPE html>
< html >
< head >
< style >
p {
border-style: solid dashed;
border-color: blue;
}
</ style >
</ head >
< body >
< p >lsbin</ p >
< p >
Border properties:color
</ p >
</ body >
</ html >输出如下：
语法如下：如果border属性值为1
border-style:dotted
Dotted:top, bottom, left and right border例子：
<!DOCTYPE html>
< html >
< head >
< style >
p {
border-style: solid;
border-color: green;
}
</ style >
</ head >
< body >
< p >lsbin</ p >
< p >
Border properties:color
</ p >
</ body >
</ html >输出如下：
