files/ja/web/css/border-radius/index.html


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
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217

---
title: border-radius
slug: Web/CSS/border-radius
tags:
  - CSS
  - CSS プロパティ
  - CSS 背景と境界
  - Reference
  - border-radius
translation_of: Web/CSS/border-radius
---
<div>{{CSSRef}}</div>

<p><strong><code>border-radius</code></strong> は <a href="/ja/docs/Web/CSS">CSS</a> の プロパティで、要素の境界の外側の角を丸めます。1つの半径を設定すると円の角になり、2つの半径を設定すると楕円の角になります。</p>

<div>{{EmbedInteractiveExample("pages/css/border-radius.html")}}</div>

<div class="hidden">このデモのソースファイルは GitHub リポジトリに格納されています。デモプロジェクトに協力したい場合は、 <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> をクローンしてプルリクエストを送信してください。</div>

<p>このプロパティ {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}} の4つのプロパティの<a href="/ja/docs/Web/CSS/Shorthand_properties">一括指定</a>です。</p>

<p>半径は要素に境界がなくても、 {{cssxref("background")}} 全体に適用されます。クリッピングが行われる正確な位置は、 {{cssxref("background-clip")}} プロパティで定義します。</p>

<p><code>border-radius</code> プロパティは {{cssxref("border-collapse")}} が <code>collapse</code> の table 要素には適用されません。</p>

<div class="note"><strong>メモ:</strong> 他の一括指定プロパティと同様、個別のサブプロパティは <code>border-radius:0 0 inherit inherit</code> のように既存の定義を部分的に上書きして継承させることはできません。代わりに、それぞれの個別指定プロパティを使用する必要があります。</div>

<h2 id="Syntax" name="Syntax">構文</h2>

<pre class="brush: css no-line-numbers"><strong>/* 最初の半径の構文は1つから4つの値が許可されています */</strong>
/* 半径を全4角に設定 */
border-radius: 10px;

/* <em>左上と右下</em> | <em>右上と左下</em> */
border-radius: 10px 5%;

/* <em>左上</em> | <em>右上と左下</em> | <em>右下</em> */
border-radius: 2px 4px 2px;

/* <em>左上</em> | <em>右上</em> | <em>右下</em> | <em>左下</em> */
border-radius: 1px 0 3px 4px;

<strong>/* 2番目の半径の構文は1つから4つの値が許可されています */</strong>
/* (最初の半径の値) / <em>radius</em> */
border-radius: 10px / 20px;

/* (最初の半径の値) / <em>左上と右下</em> | <em>右上と左下</em> */
border-radius: 10px 5% / 20px 30px;

/* (最初の半径の値) / <em>左上</em> | <em>右上と左下</em> | <em>右下</em> */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* (最初の半径の値) / <em>左上</em> | <em>右上</em> | <em>右下</em> | <em>左下</em> */
border-radius: 10px 5% / 20px 25em 30px 35em;

/* グローバル値 */
border-radius: inherit;
border-radius: initial;
border-radius: unset;
</pre>

<p><code>border-radius</code> プロパティは次のように指定することができます。</p>

<ul>
 <li>1つ、2つ、3つ、4つの {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} の値。これは角の半径を1つ設定するために使用します。</li>
 <li>その後に任意で、 "/" と1つ、2つ、3つ、4つの <code>&lt;length&gt;</code> 又は <code>&lt;percentage&gt;</code> の値。これは追加の半径を設定し、楕円形の角にすることができます。</li>
</ul>

<h3 id="Values" name="Values">値</h3>

<table>
 <tbody>
  <tr>
   <td style="vertical-align: top;"><em>半径</em></td>
   <td><img alt="all-corner.png" class="default internal" src="/@api/deki/files/6138/=all-corner.png"></td>
   <td style="vertical-align: top;">境界の四隅に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。1つの値の構文のみで使用されます。</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>左上と右下</em></td>
   <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td>
   <td style="vertical-align: top;">要素ボックスの左上と右下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。2つの値の構文のみで使用されます。</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>右上と左下</em></td>
   <td><img alt="top-right-bottom-left.png" class="default internal" src="/@api/deki/files/6143/=top-right-bottom-left.png"></td>
   <td style="vertical-align: top;">要素ボックスの右上と左下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。2つ又は3つの値の構文のみで使用されます。</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>左上</em></td>
   <td><img alt="top-left.png" class="default internal" src="/@api/deki/files/6142/=top-left.png"></td>
   <td style="vertical-align: top;">要素ボックスの左上の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。3つ又は4つの値の構文のみで使用されます。</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>右上</em></td>
   <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td>
   <td style="vertical-align: top;">要素ボックスの右上の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。4つの値の構文のみで使用されます。</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>右下</em></td>
   <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td>
   <td style="vertical-align: top;">要素ボックスの右下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。3つ又は4つの値の構文のみで使用されます。</td>
  </tr>
  <tr>
   <td style="vertical-align: top;"><em>左下</em></td>
   <td><img alt="bottom-left.png" class="default internal" src="/@api/deki/files/6139/=bottom-left.png"></td>
   <td style="vertical-align: top;">要素ボックスの左下の隅の境界に使用される半径を記述する {{cssxref("&lt;length&gt;")}} 又は {{cssxref("&lt;percentage&gt;")}} です。4つの値の構文のみで使用されます。</td>
  </tr>
 </tbody>
</table>

<dl>
 <dt><a id="&lt;length>" name="&lt;length>">{{cssxref("&lt;length&gt;")}}</a></dt>
 <dd>円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 length 値を使用して記述します。負の数は無効です。</dd>
 <dt><a id="&lt;percentage>" name="&lt;percentage>">{{cssxref("&lt;percentage&gt;")}}</a></dt>
 <dd>円の半径の長さ、又は楕円の半長軸又は半短軸の長さを、 パーセント値を使用して記述します。水平軸のパーセント値はボックスの幅、垂直軸のパーセント値はボックスの高さに対するものです。負の数は無効です。</dd>
</dl>

<p>例:</p>

<pre class="brush: css">border-radius: 1em/5em;

/* ... is equivalent to: */
border-top-left-radius:     1em 5em;
border-top-right-radius:    1em 5em;
border-bottom-right-radius: 1em 5em;
border-bottom-left-radius:  1em 5em;
</pre>

<pre class="brush: css">border-radius: 4px 3px 6px / 2px 4px;

/* ... is equivalent to: */
border-top-left-radius:     4px 2px;
border-top-right-radius:    3px 4px;
border-bottom-right-radius: 6px 2px;
border-bottom-left-radius:  3px 4px;
</pre>

<h3 id="Formal_syntax" name="Formal_syntax">形式文法</h3>

{{csssyntax}}

<h2 id="Examples" name="Examples">例</h2>

<pre style="display: inline-block; margin: 10px; border: solid 10px !important; border-radius: 10px 40px 40px 10px; width: 90%;">  border: solid 10px;
  /* 境界が「D」のように描画される */
  border-radius: 10px 40px 40px 10px;
</pre>

<pre style="display: inline-block; margin: 10px; border: groove 1em red  !important; border-radius: 2em; width: 90%;">  border: groove 1em red;
  border-radius: 2em;
</pre>

<pre style="display: inline-block; margin: 10px; background: gold; border: ridge gold  !important; border-radius: 13em/3em; width: 90%;">  background: gold;
  border: ridge gold;
  border-radius: 13em/3em;
</pre>

<pre style="display: inline-block; margin: 10px; background: gold; border: none  !important; border-radius: 40px 10px; width: 90%;">  border: none;
  border-radius: 40px 10px;
</pre>

<pre style="display: inline-block; margin: 10px; background: burlywood; border: none  !important; border-radius: 50%; width: 90%;">  border: none;
  border-radius: 50%;
</pre>

<pre style="display: inline-block; margin: 10px; border: dotted; border-width: 10px 4px  !important; border-radius: 10px 40px; width: 90%;">  border: dotted;
  border-width: 10px 4px;
  border-radius: 10px 40px;
</pre>

<pre style="display: inline-block; margin: 10px; border: dashed; border-width: 2px 4px  !important; border-radius: 40px; width: 90%;">  border: dashed;
  border-width: 2px 4px;
  border-radius: 40px;
</pre>

<h2 id="Live_Samples" name="Live_Samples">ライブサンプル</h2>

<ul>
 <li>例 1 : <a href="http://jsfiddle.net/Tripad/qnGKj/2/">http://jsfiddle.net/Tripad/qnGKj/2/</a></li>
 <li>例 2 : <a href="http://jsfiddle.net/Tripad/qnGKj/3/">http://jsfiddle.net/Tripad/qnGKj/3/</a></li>
 <li>例 3 : <a href="http://jsfiddle.net/Tripad/qnGKj/4/">http://jsfiddle.net/Tripad/qnGKj/4/</a></li>
 <li>例 4 : <a href="http://jsfiddle.net/Tripad/qnGKj/5/">http://jsfiddle.net/Tripad/qnGKj/5/</a></li>
 <li>例 5 : <a href="http://jsfiddle.net/Tripad/qnGKj/6/">http://jsfiddle.net/Tripad/qnGKj/6/</a></li>
</ul>

<h2 id="Specifications" name="Specifications">仕様書</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">仕様書</th>
   <th scope="col">状態</th>
   <th scope="col">備考</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>初回定義</td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2>

<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div>

<p>{{Compat("css.properties.border-radius")}}</p>

<h2 id="See_also" name="See_also">関連情報</h2>

<ul>
 <li>border-radius 関連 CSS プロパティ: {{cssxref("border-top-left-radius")}}, {{cssxref("border-top-right-radius")}}, {{cssxref("border-bottom-right-radius")}}, {{cssxref("border-bottom-left-radius")}}</li>
</ul>