CSS3 圆角

border-radius 属性用于为元素的边框添加圆角效果。它可以单独为每个角设置圆角，也可以统一设置所有角。

属性	描述
border-radius	所有四个边角 border---radius 属性的缩写
border-top-left-radius	定义了左上角的弧度
border-top-right-radius	定义了右上角的弧度
border-bottom-right-radius	定义了右下角的弧度
border-bottom-left-radius	定义了左下角的弧度

一 CSS3 border-radius - 指定每个圆角

如果你在 border-radius 属性中只指定一个值，那么将生成 4 个 圆角。

但是，如果你要在四个角上一一指定，可以使用以下规则：

• 四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
  

• 三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
  

• 两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角
  

• 一个值： 四个圆角值相同

二 椭圆形圆角

1. 圆形：将 border-radius 设置为 50% 使元素成为圆形（前提是元素的宽高相等）。

.circle {
  border-radius: 50%;
  width: 100px;
  height: 100px;
}

2. 椭圆形：如果宽高不相等，设置 border-radius 为 50% 也可以创建椭圆形。

#rcorners4 {
    border-radius: 50%;
    background: yellow;
    width: 50px;
    height: 100px; 
}

单个角设置：可以使用以下属性分别设置单独的角

.element {
  border-top-left-radius: 10px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 30px;
  border-bottom-left-radius: 40px;
}