CSS 边框和轮廓

属性	描述	版本
border	复合属性。设置边框的特性。	CSS1
border-color	设置边框颜色。	CSS1
border-style	设置边框样式。	CSS1
border-width	设置边框宽度。	CSS1
border-top/right/bottom/left	设置某个方位边框。	CSS1
border-top/right/bottom/left- color/style/width	设置某个方位边框某种样式。	CSS1
outline	复合属性。设置线条轮廓。	CSS2
outline-color	设置线条轮廓的颜色。	CSS2
outline-style	设置线条轮廓的样式。	CSS2
outline-width	设置线条轮廓的宽度。	CSS2
outline-offset	设置轮廓框架在 border 边缘外的偏移	CSS3
border-radius	设置圆角边框。	CSS3
border-top-left-radius	设置左上角圆角。	CSS3
border-top-right-radius	设置右上角圆角。	CSS3
border-bottom-left-radius	设置左下角圆角。	CSS3
border-bottom-right-radius	设置右下角圆角。	CSS3
border-image	设置图像来填充边框。	CSS3
border-image-source	规定要使用的图像。	CSS3
border-image-slice	规定图像边框的向内偏移。	CSS3
border-image-width	规定图像边框的宽度。	CSS3
border-image-outset	规定边框图像超过边框的量。	CSS3
border-image-repeat	规定图像边框填充模式。	CSS3

border

border 属性可以在一个声明中设置所有的边框属性。这些属性依次是：border-width, border-style, border-color。

/*边框:宽度2px,实线,红色*/
border: 2px solid red;

border-color

border-color 属性设置四个边框颜色。此属性可以有一到四个值，中间空格隔开。

值	描述
transparent	默认,指定边框的颜色是透明的。
color	CSS颜色值。

/*四条边框都是红色*/
border-color:red;

/*上下是红色，左右是绿色*/
border-color:red green;

/*上是红色，左右是绿色，下是蓝色*/
border-color:red green blue;

/*上是红色，右是绿色，下是蓝色，左是粉色*/
border-color:red green blue pink;

border-style

border-style 属性设置四个边框的样式。此属性可以有一到四个值，中间空格隔开。

值	描述
none	无边框。
hidden	隐藏边框，用于解决表中边框冲突。
dotted	点状边框。
dashed	虚线边框。
solid	实线边框。
double	双线边框。双线的宽度等于边框宽。
groove	3D 凹槽边框。
ridge	3D 垄状边框。
inset	3D inset 边框。
outset	3D outset 边框。

/*上右下左:dotted*/
border-style:dotted;

/*上下:dotted，左右:dashed*/
border-style:dotted dashed;

/*上:dotted，左右:dashed，下:solid */
border-style:dotted dashed solid;

/*上:dotted，右:dashed，下:solid，左:double*/
border-style:dotted dashed solid double;

例:各种值的显示结果

<style>
  div{
    
    height: 30px;
    width: 350px;
    margin:10px;
    border-width: 10px;
    border-color: #ccc;
    text-align: center;
  }
  .div1{
     border-style:dotted; }
  .div2{
     border-style:dashed; }
  .div3{
     border-style:solid; }
  .div4{
     border-style:double; }
  .div5{
     border-style:groove; }
  .div6{