一、设置边框
1、边框样式
| 属性 | 说明 |
| border-width | 设置边框的宽度 |
| boder-style | 设置边框的样式 |
| border-color | 设置边框的颜色 |
a、border-width属性
自定义边框的宽度时，不能定义为百分比。
b、border-style属性
以上属性可以设置一个、二个、三个、四个属性值，当设置一个值得时候四条边框都应用该属性值，当设置两个的时候时候上下使用第一个属性值，左右使用第二个属性值，当设置三个值的时候，第一个值应用在上边框，第二个应用到左右边框，第三个属性值应用到下边框当设置了四个属性值，按着顺时针的方向一次应用。大部分情况下groove、ridge、inset、outset可以会使用双色边框，但是当border-color属性这设置成black是，两种颜色都会显示成黑色。
2、为一条边应用边框样式
boder-top/bottom/right/left-width/style/color 用来设置一条边框的样式，可以和通用属性结合使用。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height:200px;
10 border-width: 10px;
11 border-style: ridge;
12 border-color: red;
13 border-top-style: double;
14 }
15 </style>
16 </head>
17 <body>
18 <div>
19
20 </div>
21 </body>
22 </html>
3、使用border简写属性
可以使用一次来设置border的宽度、样式、颜色，三个属性值之间用空格分开。三个属性之间的顺序可以打乱。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height:200px;
10 border:solid 2px red ;
11 }
12 </style>
13 </head>
14 <body>
15 <div>
16
17 </div>
18 </body>
19 </html>
4、创建圆角边框
border-top/bottom-left/right-radius 设置一个圆角，一对长度值或者百分比，百分比跟边框盒子的宽度和高度有关。第一个值是椭圆边框的水平半径，第二个值是椭圆的垂直半径。如果只一个值是圆的半径，两个值之间用空格分开。
border -radius 一次设置边框的四个圆角，一对、两对、三对、四对长度值或者百分比，水平半径和垂直半径之间用/分开。
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height:200px;
10 border:solid 2px red;
11 border-top-left-radius: 20px 10px
12 }
13 </style>
14 </head>
15 <body>
16 <div>
17
18 </div>
19 </body>
20 </html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <style type="text/css">
7 div{
8 width: 100px;
9 height:200px;
10 border:solid 2px red;
11 border-radius: 20px/10px
12 }
13 </style>
14 </head>
15 <body>
16 <div>
17
18 </div>
19 </body>
20 </html>
一对或者一个属性值时，四个圆角是一样的，两个属性值时第一个属性值对应的是左上和右下，第二个对应的是右上和左下，三个属性值时对应的是左上、（右上、左下）、右下。四个属性值的时候是顺时针方向。
5、图像边框
原文地址：https://www.cnblogs.com/yiluhuakai/p/8443025.html