<html>
<link rel="stylesheet" href="josh.css">
<body bgcolor="#FFFFFF">

		<div id="説明">
			<table cellpadding="0" cellspacing="0" border="0" width="100%" class="main">
				<tr><td valign="top" class="name">-moz-border-radius</td><td valign="top" nowrap class="compatibility">NN <span class="emphasis">6</span> IE <span class="emphasis">なし</span> CSS <span class="emphasis">なし</span></td>
				</tr>
				<tr>
					<td colspan="2" class="divider"><img src="dwres:18084" width="100%" height="1"></td>
				</tr>
				<tr>
					<td valign="top" nowrap class="usage"><p class="literal"></p>
					</td><td valign="top" nowrap class="requirements">継承 : なし</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="description"><p>簡略化するための属性で、ボーダーの角の半径を設定することができます。指定した値の数によって、割り当てた色を適用する辺が決まります。値は、CSS3 暫定仕様の <span class="literal">border-radius</span> 属性の値とは異なります。
</p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="csssyntax"><span class="title">CSS 構文</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>-moz-border-radius: <span class="replaceable">radius</span> {1,4}</pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="value"><span class="title">値</span></td>
				</tr>
				<tr>
					<td><p>ボーダーの角の半径は、角の丸みを割り出すために想定した円の半径を示す長さで定義できます。値が大きいほど、角が丸くなります。画面表示には、ピクセル単位で長さを指定するのが最適です。<span class="literal">0%</span> (丸みなし) ～ <span class="literal">50%</span> (最大の丸み) の範囲内のパーセント値を使用することもできます。ボーダーの角を丸くしても要素のコンテンツが切り抜かれることはありません。
</p><p>この属性には設定を適用する角の数と位置によって 1 ～ 4 つの <span class="replaceable">radius</span> の値を指定できます。値の数と位置は次の表のとおりに解釈されます。
</p>
						<table border="1"><tbody><tr><th>値の数</th><th>効果</th></tr>
								<tr><td>1</td><td>4 つすべての角に同じ値が設定される</td>
								</tr>
								<tr><td>2</td><td>左上と右下の角が最初の値に設定され、右上と左下の角が 2 番目の値に設定される
</td>
								</tr>
								<tr><td>3</td><td>左上の角が最初の値に設定され、右上と左下の角が 2 番目の値に設定され、右下の角が 3 番目の値に設定される
</td>
								</tr>
								<tr><td>4</td><td>左上、右上、右下、左下の角がこの順番で設定される
</td>
								</tr>
							</tbody></table>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="initvalue"><span class="title">既定値</span></td>
				</tr>
				<tr>
					<td><p><span class="literal">0</span></p>
					</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="example"><span class="title">例</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td><span class="programlisting"><pre>div.hotbox {-moz-border-radius:20px}
div.circle {-moz-border-radius:50%}</pre>
						</span></td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="CLEARSEPARATION">&nbsp;</td>
				</tr>
				<tr>
					<td valign="top" colspan="2" class="appliesto"><span class="title">適用先</span></td>
				</tr>
				<tr>
					<td><p>すべての要素</p>
					</td>
				</tr>
			</table>
		</div>
</body>
</html>