border-top-right-radius - CSS（层叠样式表） 编辑

概要

border-top-right-radius属性设置元素的右上角弧形，这个圆弧可能是一个椭圆，或者其中一个值是0的话，就是没有圆弧，换句话就是说拐角是方形的。

一个背景通常以一张图片或者颜色开始，在边框处被剪切，更甚至就是一个圆形；剪切的额外定位通过一个CSS属性"background-clip"来定义。

语法

How to read CSS syntax.

正式语法: <length-percentage>{1,2}
where 
<length-percentage> = <length> | <percentage>
  

border-top-right-radius: radius               /* the corner is a circle    */  E.g. border-top-right-radius: 3px
border-top-right-radius: horizontal vertical  /* the corner is an ellipsis */  E.g. border-top-right-radius: 0.5em 1em

border-top-right-radius: inherit

之上:

radius

这是一个<length>或者一个<percentage>，标志着圆的半径在这个拐角用作边框。

horizontal

这是一个<length>或者一个<percentage> ，标志着椭圆的水平半长轴在这个拐角被用作边框。

vertical

这是一个<length>或者一个<percentage>，标志着椭圆的垂直半长轴在这个拐角被用作边框。

属性值

<长度>

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，它属性值的数据类型表示任意单位通过<length>，负值是无效的。

<百分数>

标志着圆弧半径的大小或者椭圆的半长轴或半短轴，水平轴的百分值是相对盒模型的宽度，垂直轴的百分值是相对盒模型的宽度，负值是无效的。

例子

div {
  border-top-right-radius: 40px 40px;
}

div {
  border-top-right-radius: 40px 20px;
}

div {
  border-top-right-radius: 40%;
}

div {
  border-top-right-radius: 40%;
}

div {
  border-top-right-radius:40%;
  border-style: black 3px double;
  background-color: rgb(250,20,70);
  background-clip: content-box;
}

技术参数

浏览器兼容性

• Desktop
• Mobile

浏览器备注

火狐内核（Gecko）

• 前缀版 (允许火狐1至火狐12) 属性使用一个不相同的名称 -moz-border-radius-topright, 相对最终属性当最终的名称被敲定之前火狐才算完成。
• 在火狐4之前，这个 <percentage> 是相对盒子宽度，甚至是当指定半径作为一个高). 这被应用到 当-moz-border-radius-topright是单个值的时候，它总是画一个圆弧，而不是一个椭圆。
• Gecko不可能正确地以点和虚线展示在圆角，它展示它们是以实线(bug 382721).

参见

边框半径相关的CSS属性：CSS速记 border-radius, 其它角的属性：border-top-left-radius, border-bottom-right-radius和 border-bottom-left-radius。