border-top-right-radius

语法

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

取值

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

说明

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

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

兼容性

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-
Basic Support	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-topright，而不是-moz-border-top-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-top-right-radius: 30px;
}
.test .two {
    border-top-right-radius: 10px 30px;
}
</style>
</head>
<body>
<ul class="test">
    <li class="one">水平与垂直半径相同时<br>border-top-right-radius:30px;</li>
    <li class="two">水平与垂直半径不同时<br>border-top-right-radius:10px 30px;</li>
</ul>
</body>
</html>