html如何设置顶端圆角,前端-CSS边框设置圆角

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

边框设置圆角

1.快速实现方法

.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;

}

2.单独设置某一个角

.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;

}

3.设置圆

在style里面的css代码加入下面这句代码就可以实现圆的效果。需要注意的是，必须是一个正方形。

border-radius: 50%;

4.设置椭圆

在style里面的css代码加入下面这句代码就可以实现圆的效果。需要注意的是，必须是一个长方形。

border-radius: 50%;