一、设置边框
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 10px12 ????????????}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/10px12 ????????????}13 ????????</style>14 ????</head>15 ????<body>16 ????????<div>17 ????????????18 ????????</div>19 ????</body>20 </html>
一对或者一个属性值时，四个圆角是一样的，两个属性值时第一个属性值对应的是左上和右下，第二个对应的是右上和左下，三个属性值时对应的是左上、（右上、左下）、右下。四个属性值的时候是顺时针方向。
5、图像边框
使用CSS设置边框和beijing
原文地址：https://www.cnblogs.com/yiluhuakai/p/8443025.html