一、语法
1、分开写
border-top-left-radius:左上;
border-top-right-radius:右上;
border-bottom-right-radius:右下;
border-bottom-left-radius:左下;
2、合并写
（1）四个参数
border-radius:左上 右上 右下 左下;
（2）三个参数
border-radius:左上 右上左下 右下;
（3）两个参数
border-radius:左上右下 右上左下;
（4）1个参数
border-radius:四个角一样;
二、实例
1、一个圆角（右上）
(1)样式
#abc{
width: 400px;
height: 400px;;
background-color: red;
margin-top:100px;
border-top-right-radius:2em;
}
(2)元素
<div id="abc"></div>
(3)效果
2、两个圆角（左上、右上）
(1)样式
#fillet{
width:300px;
height: 400px;
background-color: green;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:0em;
border-bottom-left-radius:0em;
}
(2)元素
<div id="fillet"></div>
(3)效果
3、三个圆角（左上、右上、右下）
(1)样式
#ef{
width: 400px;
height: 400px;;
background-color: black;
margin-top:100px;
border-top-left-radius:2em;
border-top-right-radius:2em;
border-bottom-right-radius:2em;
}
(2)元素
<div id="ef"></div>
(3)效果
4、四个圆角
(1)样式
#gh{
width: 400px;
height: 400px;;
background-color: pink;
margin-top:100px;
border-radius:2em;
}
(2)元素
<div id="gh"></div>
(3)效果
5、不同比例圆角(2种：左上、右下10px ；左下、右上100px)
(1)样式
#son{
width: 400px;
height: 400px;;
background-color: blue;
margin-top:100px;
border-radius:10px 100px;
}
(2)元素
<div id="son"></div>
(3)效果
6、不同比例圆角(3种：左上20px；右上、左下50px ；右下100px)
(1)样式
#gh{
width: 400px;
height: 400px;;
background-color: #9400D3;
margin-top:100px;
border-radius:20px 50px 100px;
}
(2)元素
<div id="gh"></div>
(3)效果
