CSS border-bottom-left-radius 属性

border-bottom-left-radius 属性用于设置元素左下角边框的圆角半径大小。

语法

/* 取值为长度值或百分比 */
border-bottom-left-radius: length|percentage;

/* 可以设置四个值，分别为左上、右上、右下、左下的半径大小 */
border-radius: length|percentage length|percentage length|percentage length|percentage;

值

• length：指定长度值，比如 10px。
• percentage：指定百分比，相对于容器的宽度或高度。
• inherit：继承父元素的值。

示例

设置元素左下角 20px 的圆角

border-bottom-left-radius: 20px;

设置四个角的圆角大小，记为 top-left、top-right、bottom-right 和 bottom-left，注意顺序是按照顺时针方向排列的：

border-radius: 10px 20px 30px 40px;

长度值可以为 0，表示对应的角不产生圆角效果：

border-radius: 0 20px 0 40px;

浏览器支持

• Chrome, Safari, Opera：支持；
• Firefox：从版本 4 开始支持；
• IE：从 IE 9 开始支持。

注意事项

• 可以使用 border-radius 属性简写来一次性设置四个角的圆角大小；
• 如果为 0 半径设置单位，可以简写为 0，不需要写单位；
• 如果只设置一个有单位的值，其它三个半径自动设置该值；
• 如果设置两个值，第一个为水平半径，第二个为垂直半径，其它两个半径自动设置这两个值；
• 如果设置三个值，依次代表左上角、右上角和右下角的圆角大小，左下角的圆角大小自动继承左上角的大小；
• 如果设置四个值，分别代表左上角、右上角、右下角和左下角的圆角大小。