blob: 14708714a30cd81087effeeeb2eb648de289d1b4 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
|
---
title: border-bottom-right-radius
slug: Web/CSS/border-bottom-right-radius
tags:
- CSS
- CSS 境界
- CSS プロパティ
- リファレンス
- recipe:css-property
browser-compat: css.properties.border-bottom-right-radius
translation_of: Web/CSS/border-bottom-right-radius
---
{{CSSRef}}
**`border-bottom-right-radius`** は [CSS](/ja/docs/Web/CSS) のプロパティで、角の曲率を定義する楕円の半径 (または半長軸と半短軸の半径) を指定することで、要素の右下の角を丸めます。
{{EmbedInteractiveExample("pages/css/border-bottom-right-radius.html")}}
丸みは円または楕円にすることができ、値のうちの一つが `0` であれば、丸めは行われずに角は四角くなります。
背景は、画像または単色ですが、丸みがあっても境界で切り取られます。切り取られる正確な位置は、 {{cssxref("background-clip")}} プロパティの値で定義されます。
> **Note:** このプロパティの値が `border-bottom-right-radius` プロパティの後の {{cssxref("border-radius")}} 一括指定プロパティで設定されなかった場合、このプロパティは[一括指定プロパティ](/ja/docs/Web/CSS/Shorthand_properties)によって初期値にリセットされます。
## 構文
```css
/* 角を円にする */
/* border-bottom-right-radius: 半径 */
border-bottom-right-radius: 3px;
/* パーセント値 */
border-bottom-right-radius: 20%; /* ボックスが正方形ならば円、長方形ならば楕円 */
border-bottom-right-radius: 20% 20%; /* 上と同じ。水平方向 (width) および垂直方向 (height) の 20% */
border-bottom-right-radius: 20% 10%; /* 水平方向 (width) の 20% および垂直方向 (height) の 10% */
/* 角を楕円にする */
/* border-bottom-right-radius: horizontal vertical */
border-bottom-right-radius: 0.5em 1em;
/* グローバル値 */
border-bottom-right-radius: inherit;
border-bottom-right-radius: initial;
border-bottom-right-radius: revert;
border-bottom-right-radius: unset;
```
値 1 つで指定する場合:
- 値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する円の半径を示します。
値 2 つで指定する場合:
- 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の水平の軌道長半径を示します。
- 最初の値は {{cssxref("<length>")}} または {{cssxref("<percentage>")}} であり、境界の角に使用する楕円の垂直の軌道長半径を示します。
### 値
- `<length-percentage>`
- : 円の半径または楕円の長半径および短半径を示します。絶対的な長さの場合は、 CSS の {{cssxref("<length>")}} データ型で表現することができます。水平軸のパーセント値はボックスの幅、垂直軸のパーセント軸はボックスの高さに対する値です。負の数は無効です。
## 公式定義
{{CSSInfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="Arc_of_a_circle">円弧</h3>
単一の `<length>` 値は円弧を生成します。
```html hidden
<div></div>
```
```css
div {
border-bottom-right-radius: 40px;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
```
{{EmbedLiveSample("Arc_of_a_circle")}}
<h3 id="Arc_of_an_ellipse">楕円弧</h3>
2 つの異なる `<length>` の値は楕円弧を生成します。
```html hidden
<div></div>
```
```css
div {
border-bottom-right-radius: 40px 20px;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
```
{{EmbedLiveSample("Arc_of_an_ellipse")}}
<h3 id="Square_element_with_percentage_radius">正方形の要素にパーセント値の半径</h3>
正方形の要素に単一の `<percentage>` 値を指定すると、円弧を生成します。
```html hidden
<div></div>
```
```css
div {
border-bottom-right-radius: 40%;
background-color: lightgreen;
border: solid 1px black;
width: 100px;
height: 100px;
}
```
{{EmbedLiveSample("Square_element_with_percentage_radius")}}
<h3 id="Non-square_element_with_percentage_radius">長方形の要素にパーセント値の半径</h3>
正方形ではない要素に単一の `<percentage>` 値を指定すると、楕円弧を生成します。
```html hidden
<div></div>
```
```css
div {
border-bottom-right-radius: 40%;
background-color: lightgreen;
border: solid 1px black;
width: 200px;
height: 100px;
}
```
{{EmbedLiveSample("Non-square_element_with_percentage_radius")}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- 一括指定の {{cssxref("border-radius")}} プロパティ
- {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-left-radius")}}, {{cssxref("border-top-left-radius")}}
|
