针对border进行一些分析总结，如下：
一、css1中：
border 边框（可以写复合样式）
border-style 边框样式
border-width 边框宽度
border-color 边框颜色
如：div{border:2px solid green;}
其中值得注意的是:
在border-width中除了普通的数值，还可以对应thin(1px),medium(3px),thick(4px).
在border-style中默认的样式是none,所以一般要设置，常用的参数有：solid,dotted,dashed,double(双线边框，可做一下按钮)
在border-color中也是有默认值的，在不设置的时候，它会使用当前元素的颜色做边框的颜色
二、css3中：
1.border-radius属性是一个最多可指定四个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>Documenttitle>
<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>Documenttitle>
<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>