有时候在中需一些分割来区分不同的区域，这个不但可以用来给元素边框，也可以作为不同区域的分割线。

CSS 的 border 是用于设置各种单独的边界的简写。 border 可以用于设置或多个以下的值： border-width、border-style、border-color。

任何 h5 通过 border ，可以给它设置边框的宽度、展示出来的样子（实线、虚线、圆点等）和颜色。

border: [border-width ||border-style ||border-color |inherit] ;

值：

border-width、border-style、border-color它们的遵循 css 的：左上、 右上 、右下 、左下 的原则。最多可以 4 个参数。

相关：

boder可以直接设置元素的宽度、边框样式、颜色，不需要再去单独通过border-width、border-style、border-color去设置。

接下来我们通过 div 元素，来说明 border 的使用。

 <div class="demo"></div>

.demo{
        width:px;
        height: px;
        border:px solid #ddd;
}

图

解释：通过border 为div四周宽度为 1px、填充样式为solid(实线)、颜色为#ddd的边框。

.demo{
    width:px;
    height: px;
    border-top:px solid #000;
    background: #f2f2f2;
}

图

解释：通过border-top可以只给 div 的顶部边框而不会影响其它部分的样式。

<button class="btn"></button>

.btn{       
        border-width: px;
    }

图

解释：左边是认的 button , 右边是我们后的。

.demo{
    width:px;
    height: px;
    border:px solid;        
    border-top-color:red;
    border-right-color:green;
    border-bottom-color:black;
    border-left-color:orange;    
}

图

这里千万不能写成 border-right:green;

我们有时候在元素内可能会使用margin-top这样的来让子元素和父元素的顶部有间隔，但是经常不天遂人愿，发现它并没有达到我们想要的，反而变成了父元素距离上元素了距离。如果我们在父元素设置看不见的border就可以这个问题。

td{
    border:px solid #ccc;
    border-bottom:none;
}

border-color 如果不设置那么它会使用元素中字体的颜色。

div{
widht:px;
height:px
border-width:px;
}

上面这样的设置 div 在中实际站位是 104px，如果不注意很容易造成错乱。这是因为我们大部分情况下盒模型使用的是 W3C 标准的’@R_894_2@-sizing: content-@R_894_2@;’，它在中实际宽度 = width+border( 该公式仅针对上面例子）。

如果我们需要给 button 设置颜色，那么它就会失去浏览器的交互。

border-top 的使用和 border 的使用是一样的，如果要个性化边的颜色，可以这样设置： border-top-color:red;也可以这样设置： border-top:1px solid red;。