使用 border-radius 属性，你可以给任何元素制作 "圆角"。

例

div{
    border-radius: 25px;
}

border-radius与元素里面的样式设置无关，是控制当前元素的圆角，

圆角属性

属性作用
border-radius所有四个边角 border---radius 属性的缩写
border-top-left-radius左上角
border-top-right-radius右上角
border-bottom-right-radius右下角
border-bottom-left-radius左下角

border-radius 指定每个圆角

试一试

示例作用位置
border-radius: 25px;四个圆角值相同
border-radius: 25px 50px;左上与右下：25px，右上与左下：50px
border-radius: 25px 40px 50px;左上：25px，右上和左下：40px，右下：50px
border-radius: 25px 30px 40px 50px;左上：25px，右上：30px，右下：40px，左下：50px;

椭圆角

试一试

示例作用
border-radius: 50px/15px;椭圆角，角度值可切换
border-radius: 50%;椭圆