边框样式

border-style定义元素的四个边框样式，可选值：

none : 默认值。无边框

hidden : 隐藏边框

dotted :点线边框

dashed : 虚线边框

solid :实线边框

double : 双线边框。两条单线与其间隔的和等于 border-width 值

groove : 3D凹槽 ，效果取决于 border-color 的值

ridge : 3D凸槽 ，效果取决于border-color值

inset : 3D凹边 ，效果取决于 border-color 的值

outset : 3D凸边， 效果取决于 border-color 的值

如果border-styler设置全部四个参数值，将按上－右－下－左的顺序作用于四个边框。如果只设置一个，将用于全部的四条边。如果设置两个值，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

div {border-style: dotted}

四个边框的样式将为点线

div {border-style: dotted dashed}

上下边框的样式将为点线(dotted），左右边框的样式将为虚线(dashed)

div {border-style: dotted dashed solid}

上下边框的样式将为点线(dotted）, 左右边框的样式将为虚线(dashed), 下边框的样式将为实线(solid)

div {border-style: dotted dashed solid double}

上边框的样式将为点线(dotted）,右边框的样式将为虚线(dashed), 下边框的样式将为实线(solid), 左边框的样式将为双线( double)

注意:如果 border-width 设置为 0 ，border-style属性将失去作用。

边框的颜色(border-color)

border-color定义元素的四个边框颜色，可选值：

• color。请参阅CSS颜色
• transparent，透明

如果border-color设置全部四个参数值，将按上－右－下－左的顺序作用于四个边框。如果只设置一个，将用于全部的四条边。如果设置两个值，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

table {border-color: red}

四个边框的颜色将为红色（red）

table {border-color: red green}

上下边框的颜色将为红色（red），左右边框的颜色将为绿色（green）

table {border-color: red green blue}

上边框的颜色将为红色，左右边框的颜色将为绿色（green）下边框的颜色将为蓝色（blue）

table {border-color: red green blue yellow}

上边框的颜色将为红色，右边框的颜色将为绿色（green），下边框的颜色将为蓝色（blue），左边框的颜色将为黄色（green）

注意: 只设置 "border-color" 属性将看不到效果，须要先设置 "border-style" 属性

边框宽度(border-width)

border-width定义元素的四个边框宽度,可选值：

• medium : 默认值。默认宽度
• thin : 小于默认宽度
• thick : 大于默认宽度
• length :长度值,不可为负值。请参阅CSS长度单位

如果border-width设置全部四个参数值，将按上－右－下－左的顺序作用于四个边框。如果只设置一个，将用于全部的四条边。如果设置两个值，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。

注意:如果 border-style 设置为 none ，border-width属性将失去作用。先设置 border-style属性再设置border-width属性。

边框属性(border)

border是一个综合属性，定义元素的四个边框的宽度、样式和颜色。句法为：

border{border-width ;border-style ;border-color;}

例如：

p{ border: thin dotted #00FF00;}

span{ border: solid #0000FF}

上边框(border-top)

border-top单独定义元素的上边框，句法为：

border-top : {border-width ;border-style ;border-color; }

例如：

table{border-top: thin dotted #00FF00}

table{border-top: solid #0000FF}

上边框样式（border-top-style）

border-top-style单独定义元素的上边框的样式。如：

h1{?border-top-style: solid}

上边框颜色（border-top-color）

border-top-color单独定义元素的上边框的颜色.如：

p
{
border-style: solid;
border-top-color: #ff0000
}

div {
border-style: solid;
border-top-color: rgb(255,0,0)
}

注意: 只设置 "border-color" 属性将看不到效果，须要先设置 "border-style" 属性

上边框宽度(border-top-width)

border-top-width单独定义元素的上边框宽度,.如：

p{border-style: solid;border-top-width: thin;}
div{?border-style: solid;border-top-width: 0.5cm}

注意:先设置 border-style属性，再设置border-width属性。

同理，还有：

• 右边框属性
  border-right
  border-right-width
  border-right-style
  border-right-color
• 下边框属性
  border-bottom
  border-bottom--width
  border-bottom--style
  border-bottom--color
• 左边框属性
  border-left
  border-left-width
  border-left-style
  border-left-color

div {
border-top-color: red;
border-bottom-color: RGB(223, 94, 77);
border-right-color:blue;
border-left-color: black;
}

p{
border-top-style: double;
border-bottom-style: groove;
border-left-style: dashed;
border-right-style: dotted;
}