.box1 { width: 400px; height: 400px; background-color: blueviolet; margin: 0px 0px 10px;}

盒子模型效果图，盒子可见框的大小由内容区，内边距和边框共同决定。

box1效果图

.box2 { border-width: 10px; border-color: red; border-style: solid;}

box2效果图

.box3 { border-width: 10px 20px; border-color: red green; border-style: solid dotted;}

box3效果图

.box4 { border-width: 10px 20px 30px; border-color: red green yellow; border-style: solid dotted dashed;}

box4效果图

.box5 { border-width: 10px 20px 30px 40px; border-color: red green yellow blue; border-style: solid dotted dashed double;}

box5效果图

<!-- html代码 --><div class="box1"></div><div class="box1 box2"></div><div class="box1 box3"></div><div class="box1 box4"></div><div class="box1 box5"></div>