盒子模型的边框属性

一、盒子边框（border）

1. 设置边框样式：border-style
none：没有边框即忽略所有边框的宽度（默认值）
   solid：边框为单实线(最为常用的)
   dashed：边框为虚线
   dotted：边框为点线
   double：边框为双实线

设置内容	样式属性
上边框	border-top-style: 样式 ; border-top-width : 宽度 ; border-top-color : 颜色 ; border-top:宽度 样式 颜色;
下边框	border-bottom-style:样式 ;border- bottom-width:宽度;border- bottom-color: 颜色; border-bottom:宽度 样式 颜色;
左边框	border-left-style: 样式 ; border-left-width: 宽度;border-left-color:颜色;border-left:宽度 样式 颜色;
右边框	border-right-style: 样式;border-right-width: 宽度 ; border-right-color:颜色 ; border-right:宽度 样式 颜色;
样式综合设置	border-style:上边 右边 下边 左边;
宽度综合设置	border-width:上边 右边 下边 左边
颜色综合设置	border-color:上边 右边 下边 左边
边框综合设置	border:四边宽度 四边样式 四边颜色

二、表格的细线边框

table{ border-collapse:collapse; }  

collapse： 合并

border-collapse:collapse: 表示边框合并在一起。

三、圆角边框

border-radius: 左上角  右上角  右下角  左下角;

radius 半径

属性	操作内容
border-radius: 10px	4个角都是 10px 的弧度
border-radius: 10px 40px	左上角和右下角是 10px , 右上角和左下角 40px （对角线）
border-radius: 10px 40px 80px	左上角 10px, 右上角和左下角 40px , 右下角80px
border-radius: 10px 40px 80px 100px	左上角 10px , 右上角 40px, 右下角 80px, 左下角 100px
border-radius: 50%;	取宽度和高度 一半 则会变成一个圆形