CSS | border-bottom-right-radius 属性

简介

border-bottom-right-radius 属性设置元素右下角的圆角大小。这个属性可以设置 1 到 4 个值，分别表示每个角的圆角大小。

语法

border-bottom-right-radius: length|% [length|%]? [length|%]? [length|%]?;

• length：指定圆角的半径长度，可以使用绝对值（如 px、pt 等）或相对值（如 em、% 等）。
• %：相对于该元素的宽度来指定圆角的半径百分比。

参数

• length | %：指定圆角的半径大小，可以设置多个值来控制每个角的圆角大小。

如果只设置了一个值，那么就代表了所有角的圆角大小都是一样的。如果设置了两个值，则第一个值表示左下角和右上角的圆角大小，第二个值表示右下角和左上角的圆角大小。如果设置了三个值，则第一个值表示左下角的圆角大小，第二个值表示右下角和左上角的圆角大小，第三个值表示右上角的圆角大小。如果设置了四个值，则分别代表了左下角、右下角、右上角和左上角的圆角大小。

示例

以下示例展示了如何使用 border-bottom-right-radius 属性来设置元素的右下角的圆角大小：

/* 将元素的右下角圆角设置为 20px */
border-bottom-right-radius: 20px;

/* 将元素的左下角和右上角圆角设置为 10px，右下角圆角设置为 20px，左上角不设置圆角 */
border-bottom-right-radius: 10px 20px;

/* 将元素的左下角圆角设置为 10px，右下角和左上角圆角设置为 20px，右上角不设置圆角 */
border-bottom-right-radius: 10px 20px 20px;

/* 将元素的所有角的圆角大小都设置为 10px */
border-bottom-right-radius: 10px;

/* 将元素的所有角的圆角大小都设置为其宽度的 50% */
border-bottom-right-radius: 50%;

浏览器兼容性

border-bottom-right-radius 属性基本上可以在所有现代浏览器中使用。以下是一些常见浏览器的兼容性信息：

| Chrome | Firefox | Safari | Opera | IE | | ------ | ------- | ------ | ----- | -- | | 4.0+ | 4.0+ | 5.0+ | 10.5+ | 9+ |

总结

border-bottom-right-radius 属性是一个非常有用的样式属性，它可以帮助我们更好地控制元素的样式，特别是元素的边框样式。通过了解这个属性，我们可以更好地掌握 CSS 样式的技巧，从而写出更加美观、高效的网页设计。