前端-CSS边框设置圆角

今天给小伙伴们继续分享CSS相关的知识，这里分享一下CSS边框设置圆角的方法。

边框设置圆角

1.快速实现方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                /*设置宽度和高度 单位px（像素）*/
                width: 100px;
                height: 100px;
                /*边框设置圆角*/
                border: 4px solid red;
                /*设置四个角*/
                border-radius: 20px;
                /*第一个参数设置（上左、下右），第二个参数设置（上右、下右）*/
                border-radius: 10px 20px;
                /*第一个参数上左，第二个参数设置上右、下左，第三个参数设置下右*/
                /*border-radius: 10px 20px 30px;*/
                /*四个参数分别代表上左、上右、下右、下左*/
                border-radius: 10px 20px 30px 40px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

2.单独设置某一个角

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .box{
                /*设置宽度和高度 单位px（像素）*/
                width: 100px;
                height: 100px;
                /*边框设置圆角*/
                border: 4px solid red;
                /*设置左上角*/
                border-top-left-radius: 20px;
                /*设置右上角*/
                border-top-right-radius: 20px;
                /*设置左下角*/
                border-bottom-left-radius: 20px;
                /*设置右下角*/
                border-bottom-right-radius: 20px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>