边框：border
圆角：border-radius
让四个角都成圆角
示例：
HTML代码
<div class="box">
</div>
style样式代码
<style>
.box{
background: green;
color: white;
width: 100px;
height: 50px;
border-radius: 20px;
text-align: center;
line-height: 50px;
}
</style>
image.png
圆角：
boorder-radius：让四个角都圆角
数值：弧度的长度
数值1/数值2 ：
数值1代表角度水平方向的长度
数值2代表角度垂直方向的长度
一个值：代表4个方向
<div class="box">
</div>
<style>
.box{
background: green;
width: 100px;
height: 100px;
border-radius: 20px;
}
</style>
image.png
单独设置某一个角度的圆角
bordr-top-left-radius：左上角
<div class="box">
</div>
<style>
.box{
background: green;
width: 100px;
height: 100px;
border-top-left-radius: 20px;
}
</style>
image.png
四个值：四个方向 左上 右上 右下 左下 顺时针方向
三个值：左上 右上左下 右下
两个值：左上右下 右上左下
值列表1/值列表2
值列表可以是1值或者2值或者4个值
值列表1全部代表水平方向
值列表2全部代表垂直方向
值单位
px
% ：相对于自身