border-radius 允许开发者设置元素的外边框圆角。当使用一个半径时确定一个圆形，当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

1.圆角矩形

.rectangle1 {

width: 300px;

height: 100px;

background-color: #23c6d9;

border-radius: 8px;

}

2.圆形

宽度高度相同，border-radius:取值50%

.circle1 {

width: 200px;

height: 200px;

background-color: #23c6d9;

border-radius: 50%;

}

3.椭圆形

宽度高度不相同，border-radius:取值50%

.circle2 {

width: 300px;

height: 200px;

background-color: #23c6d9;

border-radius: 50%;

}

4.胶囊状矩形

border-radius:取值为高度的50%

.rectangle2{

width: 300px;

height: 100px;

background-color: #23c6d9;

border-radius: 50px;

}

5.不规则圆角矩形

border-radius取多个值

.rectangle2{

width: 300px;

height: 100px;

background-color: #23c6d9;

border-radius: 60px 0px 40px 50px/30px 0px 50px 80px;

}