border-top-right-radius

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

border-top-right-radius.png

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

备注: 在 border-top-radius-radiu 属性值之后,如果作用在一个元素上没有设置“border-radius”简写属性,那么这个属性值就会通过简写属性重新设置成它的初始值。

语法

css
/* the corner is a circle */
/* border-top-right-radius: radius */
border-top-right-radius: 3px;

/* the corner is an ellipse */
/* border-top-right-radius: horizontal vertical */
border-top-right-radius: 0.5em 1em;

border-top-right-radius: inherit;

/* Global values */
border-top-right-radius: inherit;
border-top-right-radius: initial;
border-top-right-radius: revert;
border-top-right-radius: revert-layer;
border-top-right-radius: unset;

之上:

radius

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

horizontal

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

vertical

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

属性值

<长度>

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

<百分数>

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

形式定义

初始值0
适用元素all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.
是否是继承属性
Percentagesrefer to the corresponding dimension of the border box
计算值two absolute <length>s or <percentage>s
动画类型a length, percentage or calc();

形式语法

border-top-right-radius = 
<length-percentage [0,∞]>{1,2}

<length-percentage> =
<length> |
<percentage>

示例

实例 代码
圆形的弧被用作边框
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;
}

规范

Specification
CSS Backgrounds and Borders Module Level 3
# the-border-radius

浏览器兼容性

BCD tables only load in the browser

参见

边框半径相关的 CSS 属性:CSS 速记 border-radius, 其他角的属性:border-top-left-radius, border-bottom-right-radiusborder-bottom-left-radius