CSS圆角边框

一、 border-radius 属性

使用 CSS3 border-radius 属性，可以给元素制作 “圆角”。

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

如下所示，则该元素的四个角都是圆角。

div{
    border-radius: 20px;
}

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

• 四个值: 左上，右上，右下，左下。（顺时针）

• 三个值: 左上, 右上和左下，右下。（左上、对角、右下）

• 两个值: 左上与右下，右上与左下。（对角）

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

画圆形的办法：圆角大小 >= 盒子半径

二、椭圆边角

#box1 {
    border-radius: 50px/15px;
}

#box2 {
    border-radius: 50%;
}

三、border-radius - 指定每个圆角

属性	描述
border-radius	所有四个边角
border-top-left-radius	左上
border-top-right-radius	右上
border-bottom-right-radius	右下
border-bottom-left-radius	左下