CSS3 border-bottom-right-radius 属性

border-bottom-right-radius 属性用于设置元素右下角边框的圆角半径值。它可以接受一个或两个值，分别表示水平方向和垂直方向的圆角半径。如果只提供一个值，则表示水平和垂直方向的圆角半径相同。如果提供两个值，则第一个值表示水平方向的圆角半径，第二个值表示垂直方向的圆角半径。

语法

/* 一个值 */
border-bottom-right-radius: <length> | <percentage>;

/* 两个值 */
border-bottom-right-radius: <length> <length> | <percentage> <percentage>;

• <length>：指定一个具体的长度值，如 px、em 等。
• <percentage>：指定一个百分比值，相对于元素本身的尺寸。

示例

一个值

div {
  border-bottom-right-radius: 10px;
}

上面的示例将元素右下角的边框设置为半径为 10px 的圆角。

两个值

div {
  border-bottom-right-radius: 10px 20px;
}

上面的示例将元素右下角的边框设置为水平方向半径为 10px，垂直方向半径为 20px 的圆角。

百分比值

div {
  border-bottom-right-radius: 50% 50%;
}

上面的示例将元素右下角的边框设置为水平方向和垂直方向都为元素宽度的 50% 的圆角。

注意事项

• 如果设置了 border-radius 属性，border-bottom-right-radius 属性会覆盖其中对应的值。
• 如果 border-radius 只设置了一个值，而 border-bottom-right-radius 设置了两个值，则第一个值会应用于水平方向，第二个值会应用于垂直方向。