针对border进行一些分析总结，如下：
一、css1中：
border 边框
border-width 边框宽度（粗细）
border-style 边框样式（样式）
border-color 边框颜色（颜色）
如：边框的复合样式 div{border:2px solid green;} 每条线都相同
边框的单一样式 div{border-top-style:dotted;border-right-color:red;border-bottom-30px} 每条线都不一样
其中值要注意:
在border-width中除了普通的数值，还可以对应thin(1px),medium(3px),thick(4px).
在border-style中默认的样式是none,所以一般要设置，常用的参数有：solid,dotted,dashed,double(双线边框，可做一下按钮)
在border-color中也是有默认值的，在不设置的时候，它会使用当前元素的颜色做边框的颜色。
边框是一个非矩形，可以做一个三角形。代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用边框做三角形</title>
<style>
div{
width: 0px;
height: 0px;
border:10px solid transparent;
border-top-color:red;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
二、css3中：
1.border-radius属性是一个最多可指定四个角的度数的复合属性
后面可以接数值：
20px（四个角一样20px）
20px 30px (左上和右下为20px,右上和左下为30px )
20px 30px 40px(左上：20px 右上：30px 右下：40px 左下：30px)
20px 30px 40px 50px （四个角顺时针）
也可以用border-top/bottom/left/right-radius来定义某个角的边框形状，这样来进行每个角不同的设置。
还有border-radius后面可以写成如下形式：20px/30px。这样的话里面的圆为椭圆。
范例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
width: 200px;
height: 200px;
background: chartreuse;
/* border-radius: 50%; */
border-top-left-radius: 100px;
border-top-right-radius: 100px;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
}
.box2{
width: 200px;
height: 200px;
background: chocolate;
border-top-left-radius: 200px;
}
.box3{
width:200px;
height: 200px;
background:cornflowerblue;
border-radius: 100px 100px 0 0;
height: 100px;
}
.box4{
width: 200px;
height: 100px;
background: crimson;
/* border-radius: 100px/50px; */
border-radius: 50%;
}
</style>
</head>
<body>
<!-- 画一个圆 -->
<div class="box1"></div>
<br>
<!-- 画一个四分之一圆 -->
<div class="box2"></div>
<br>
<!-- 画一个半圆 -->
<div class="box3"></div>
<br>
<!-- 画一个椭圆 -->
<div class="box4"></div>
</body>
</html>
2.border-image 边框图片
border-image-outset 设置边框图片向外
border-image-width 设置边框图像所占边框宽度
border-image-slice 切割背景图片
border-image-repeat 背景的填充方式（stretch,rpeat,round,space）
border-image-source 引入边框图片或者是创建渐变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
background: pink;
border:30px solid;
margin:0 auto;
border-image: url(../MYPROJECT/img/borderbg.jpg) 30 30 repeat;
}
</style>
</head>
<body>
<div></div>
</body>
</html>