border-bottom-right-radius

语法

  • border-bottom-right-radius:[ <length> | <percentage> ]{1,2}
  • 默认值:0
  • 适用于:所有元素
  • 继承性:无
  • 动画性:是
  • 计算值:指定值

取值

  • <length>:用长度值设置对象的右下角(bottom-right)圆角半径长度。不允许负值
  • <percentage>:用百分比设置对象的右下角(bottom-right)圆角半径长度。不允许负值

说明

设置或检索对象的右下角圆角边框。提供2个参数,2个参数以空格分隔,每个参数允许设置1个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数

  • 如设置border-bottom-right-radius:5px 10px表示bottom-right这个角的水平圆角半径为5px,垂直圆角半径为10px。
  • 对应的脚本特性为borderBottomRightRadius。

兼容性

Values IE Firefox Chrome Safari Opera iOS Safari Android Browser Android Chrome
Basic Support 6.0-8.0 2.0-12.0
-moz- #1 #2
4.0-43.0
-webkit-
3.1-8.1
-webkit-
10.5-28.0
-webkit-
3.2-8.1
-webkit-
2.1-4.4.4
-webkit-
18.0-40.0
-webkit-
9.0+ 4.0+ 5.0+ 5.0+ 10.5+ 4.0+ 2.2+ 18.0+
  • Firefox从13.0开始移除对-moz-的支持,仅支持标准的border-radius写法,在4.0-12.0区间,两种方式都支持。
  • Firefox支持的厂商前缀写法是非标准的-moz-border-radius-bottomright,而不是-moz-border-bottom-right-radius。

示例


<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<style>
ul {
    margin: 0;
    padding: 0;
}
li {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 10px;
    background: #bbb;
}
.test .one {
    border-bottom-right-radius: 30px;
}
.test .two {
    border-bottom-right-radius: 10px 30px;
}
</style>
</head>
<body>
<ul class="test">
    <li class="one">水平与垂直半径相同时<br>border-bottom-right-radius:30px;</li>
    <li class="two">水平与垂直半径不同时<br>border-bottom-right-radius:10px 30px;</li>
</ul>
</body>
</html>