边框圆角

边框：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
                %   ：相对于自身