1.设置边框的宽度

/*  如果指定一个值，则四边全都是该值 */
border-width:10px ;
/*指定了四个值则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的*/
border-width:10px 20px 30px 40px ;
/* 指定三个值，则三个值会分别设置给  上  左右 下 */
border-width:10px 20px 30px ;
/* 指定两个值，则两个值会分别设置给 上下 左右*/
border-width: 10px 20px ;
/* 除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left
专门用来设置指定边的宽度 */
border-left-width:100px ;

2.设置边框的颜色

和宽度一样，color也提供四个方向的样式，可以分别指定颜色

border-color: red;
border-color: red yellow orange blue;
border-color: red yellow orange;
border-color: red yellow;

3.设置边框的样式

可选值：

none，默认值，没有边框
solid 实线
dotted 点状边框
dashed 虚线
double 双线

style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边

border-style: solid;
border-style: solid dotted dashed double;

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">

            .box1{
                width: 300px;
                height: 300px;
                background-color: #bfa;
                /*
                 * 设置边框的宽度
                 */
                border-width:10px 20px 30px 40px ;

                /*
                 * 设置边框的颜色
                 */
                border-color: red yellow orange blue;

                /*
                 * 设置边框的样式
                 */
                border-style: solid;
                /*border-style: solid dotted dashed double;*/
            }

        </style>
    </head>
    <body>
        <div class="box1"></div>
    </body>
</html>

预览效果:

image.png

4.边框简写

边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
而且没有任何的顺序要求
border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效

border: red solid 10px;

border-left: red solid 10px;
border-top: red solid 10px;
border-bottom: red solid 10px;
border-left: red solid 10px;

border: red solid 10px;
border-right: none;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>边框简写</title>
        <style type="text/css">
            .box{
                width: 200px;
                height: 200px;
                background-color: #bfa;
                border: red solid 10px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>