CSS border-radius 属性

主题

定义和用法

border-radius 用于为元素添加圆角效果。这个属性可以接受1到4个值，分别对应元素四个角的圆角半径。

border-radius 不会影响元素的内容区域，只影响边框和背景的显示。

默认值：	0
继承性：	否
可动画性：	支持。请参阅：可动画属性。
版本：	CSS3
JavaScript 语法：	object.style.borderRadius="25px"Demo ❯

下面通过一些示例，让你更直观地了解 border-radius 属性的用法：

1. 单一值：四个角使用相同的圆角半径：

border-radius: 15px; /* 所有四个角都是15px圆角 */

2. 两个值：第一个值设置左上和右下角，第二个值设置右上和左下角

border-radius: 15px 30px; /* 左上和右下15px，右上和左下30px */

3. 三个值：第一个值设置左上角，第二个值设置右上和左下角，第三个值设置右下角

border-radius: 15px 30px 45px; /* 左上15px，右上和左下30px，右下45px */

4. 四个值：分别设置左上、右上、右下、左下四个角的半径（顺时针顺序）

border-radius: 15px 30px 45px 60px; /* 左上15px，右上30px，右下45px，左下60px */

5. 椭圆角：可以使用斜杠(/)指定水平和垂直半径

border-radius: 150px / 60px; /* 水平半径150px，垂直半径60px */

6. 百分比值：相对于元素的尺寸计算

border-radius: 50%; /* 当元素是正方形时创建圆形，当元素是长方形时创建椭圆形 */

7. 不规则：可以使用斜杠(/)指定两个水平和垂直半径

border-radius: 40px 80px / 60px; /* 水平半径40px和80px，垂直半径60px */

下面是border-radius属性的代码演示实例，可以尝试一下：

尝试一下 »

border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;