在CSS中通过border-radius属性即可设置元素的圆角特性。

border-radius属性

在CSS中border-radius属性定义元素的圆角半径。

案例1：指定背景颜色的元素

案例2：指定边框样式的元素

案例3：指定背景图片的元素

#rcorners1 {
    border-radius: 28px;
    background: #46acb6;
    padding: 26px; 
    width: 170px;
    height: 110px;
    color: #fff;
}

#rcorners2 {
    border-radius: 28px;
    border: 3px solid #46acb6;
    padding: 26px; 
    width: 170px;
    height: 110px;    
}

#rcorners3 {
    border-radius: 28px;
    background: url(https://logo.zhuanfou.com/bash.png);
    padding: 26px; 
    width: 170px;
    height: 110px;
    color: Tomato;
}

运行一下

---

如果想分别设置四个角的圆角半径，可以使用border-radius来通吃；也可以分别独立设置四角圆角半径，border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius属性。

---

使用border-raidus来分别设置

border-radius属性，有4种取值方式，分别可以设置1个取值、2个取值、3个取值、4个取值。

4个取值，例如border-radius:14px 49px 32px 7px;
依次代表：左上角/右上角/右下角/左下角

3个取值，例如border-radius:14px 49px 32px;
依次代表：左上角/右上角和左下角/右下角

2个取值，例如border-radius:14px 49px;
依次代表：左上角和右下角/右上角和左下角

1个取值，例如border-radius:14px;
直接代表4个角

#rcorners1 {
    border-radius: 14px 49px 32px 7px;
    background: #46acb6;
    padding: 26px; 
    width: 170px;
    height: 110px; 
}

#rcorners2 {
    border-radius: 14px 49px 32px;
    background: #46acb6;
    padding: 26px; 
    width: 170px;
    height: 110px; 
}

#rcorners3 {
    border-radius: 14px 49px;
    background: #46acb6;
    padding: 26px; 
    width: 170px;
    height: 110px; 
} 

#rcorners4 {
    border-radius: 14px;
    background: #46acb6;
    padding: 26px; 
    width: 170px;
    height: 110px; 
} 

运行一下

设置椭圆形圆角

如下例所示，如果用符号/分割取值，则分别代表着椭圆的长短半径，具体的试试呗~

border-radius: 50px / 15px;

border-radius: 15px / 50px;

border-radius: 50%;

#rcorners1 {
    border-radius: 50px / 15px;
    background: #46acb6;
    padding: 26px; 
    width: 170px;
    height: 110px; 
}

#rcorners2 {
    border-radius: 15px / 50px;
    background: #46acb6;
    padding: 26px; 
    width: 170px;
    height: 110px; 
}

#rcorners3 {
    border-radius: 50%;
    background: #46acb6;
    padding: 26px; 
    width: 170px;
    height: 110px; 
}

运行一下