CSS-右下角的邊框半徑 | border-bottom-right-radius

該border-bottom-right-radius屬性設置元素右下角的舍入。

/* The corner is a circle */
/* border-bottom-right-radius: radius */
border-bottom-right-radius: 3px;

/* Percentage values */
border-bottom-right-radius: 20%; /* corner of a circle if box is a square or else corner of a rectangle */
border-bottom-right-radius: 20% 20%; /* same as above */ /* 20% of horizontal(width) and vertical(height) */
border-bottom-right-radius: 20% 10%; /* 20% of horizontal(width) and 10% of vertical(height) */

/*The corner is an ellipsis */
/* border-bottom-right-radius: horizontal vertical */
border-bottom-right-radius: 0.5em 1em;

border-bottom-right-radius: inherit;

舍入可以是圓或橢圓，或者如果其中一個值是0沒有圓角，拐角處是正方形的。

背景(圖像或顏色)在邊框中被裁剪，甚至是圓形的；裁剪的確切位置由background-clip財產。

如果此屬性的值未在border-radius屬性之後應用於元素的速記屬性。border-bottom-right-radius屬性將此屬性的值重置爲初始值。速記性質...

Initial value	0
Applies to	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.
Inherited	no
Percentages	refer to the corresponding dimension of the border box
Media	visual
Computed value	two absolute <length>s or <percentage>s
Animation type	a length, percentage or calc();
Canonical order	the unique non-ambiguous order defined by the formal grammar

句法

只有一個價值：

• 值是<length>或者是<percentage>表示圓圈的半徑，用於那個角落的邊框。有兩個值：

• 第一個值是<length>或者是<percentage>表示省略號的水平半長軸，用於該角的邊框。

• 第二個值是<percentage>表示省略號的垂直半長軸，用於該角的邊框。

值

<length-percentage>表示圓周半徑的大小，或省略的半長和半短軸的大小。作爲絕對長度，它可以用css允許的任何單位表示。<length>數據類型。水平軸的百分比指框的寬度，垂直軸的百分比指框的高度。負值無效。

形式語法

<length-percentage>{1,2}where 
<length-percentage> = <length> | <percentage>

實例

Live example	Code
.	An arc of circle is used as the border div { border-bottom-right-radius: 40px 40px; }
.	An arc of ellipse is used as the border div { border-bottom-right-radius: 40px 20px; }
.	The box is a square: an arc of circle is used as the border div { border-bottom-right-radius: 40%; }
.	The box is not a square: an arc of ellipse is used as the border div { border-bottom-right-radius: 40%; }
.	The background color is clipped at the border div { border-bottom-right-radius:40%; border-style: black 3px double; background-color: rgb(250,20,70); background-clip: content-box; }

規範

Specification	Status	Comment
CSS Backgrounds and Borders Module Level 3The definition of 'border-bottom-right-radius' in that specification.	Candidate Recommendation	Initial definition

瀏覽器兼容性

Feature	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
Basic Support	4 1 -webkit-	(Yes) (Yes) -webkit-	41 49 -webkit- 2 1 — 12 (as -moz-border-radius-topright)	9	10.5	5 3 -webkit-
Percentages	4	(Yes)	4 13	9	10.5	5
Ellipitcal corners	1	(Yes)	3.5	9	10.5	3

Feature	Android	Chrome for Android	Edge mobile	Firefox for Android	IE mobile	Opera Android	iOS Safari
Basic Support	?	?	(Yes) (Yes) -webkit-	(Yes)1	?	?	?
Percentages	?	?	(Yes)	(Yes)	?	?	?
Ellipitcal corners	?	?	(Yes)	(Yes)	?	?	?

糾錯

1. 在Firefox 50之前，圓角的邊框樣式總是呈現出border-style設置爲solid的樣式，這已在Firefox 50中修復。

2. 從Firefox 44到48，-webkit-前綴可用於layout.css.prefixes.webkit首選項。從Firefox 49開始，首選項默認爲true。

3. 在Firefox 4之前，<percentage>即使爲高度指定半徑，也會與盒子的寬度相關。這意味着-moz-border-radius-topright總是繪製一個圓弧，而不是一個橢圓，後面是單個值。

另見

邊界半徑相關的CSS屬性：CSS簡寫屬性border-radius，各個頂角的屬性：border-top-right-radius，border-bottom-right-radius，和border-top-left-radius。