CSS3 border-radius：角丸指定のシミュレーション
これまで画像を隅に配置するなどして表現していた角丸図形ですが、CSS3 から新たに追加された border-radius プロパティを使えば、シンプルな記述で簡単に角丸図形が表現できるようになりました。
CSS3 に対応したブラウザでないと border-radius プロパティを指定しても単なる四角形として表示されるだけですが、最低でも四角形は表示されるので、角丸図形でないと操作等に影響が出る場合を除いて積極的に使いたい CSS3プロパティの一つだと思います。
このページは border-radius プロパティを使って角丸図形を表現する場合、各部位に対して指定する半径の値（ピクセル単位）が、実際のCSSにどのように反映されるかを学習・確認する為に造りました。（つまり、まだ自分は border-radius プロパティに全然慣れていないって事であります...）
シミュレーションという程のモノでは有りませんが、各部に数値を入力し【図形描画】をクリックすると入力数値に応じた角丸図形と、<div class="rbox"> という要素を想定した CSS が表示されます。（表示されたCSSのコードの border-radius: 部分はそのままコピペして使えます）
角丸指定
※width、hightは1～600の範囲で、各コーナー部の角丸半径は0～300の範囲内の数値で指定が可能
※width、hightが空欄の場合は最大値の600が指定されたものとして処理
※各コーナー部の各角丸半径が空欄の場合は指定無しとしてルール（後述）に則り処理
※borderプロパティは実線、太さ1px、カラーは青（#0000FF）固定
※CSS3に対応していないブラウザ（ IE6/7/8 など）では角丸図形として表示されません
border-radius プロパティの書式
各コーナー部（計8箇所）全てに値を入れた場合のCSSに於ける border-radius プロパティの表記は
border-radius: Ax Bx Cx Dx / Ay By Cy Dy; となります。
ポイントA（左上）を起点として時計回りに、途中の【/】スラッシュを境にして水平（x軸）と垂直（y軸）のペアで値を指定するわけですが、【/】を省略して４ヶ所の値のみを指定すると、各コーナーの水平（x軸）と垂直（y軸）に同じ値が指定されたものとしてブラウザが解釈します。
各コーナー部全てに値を指定する必要はありませんが、その場合には以下のルールが適用されます
- Ax(Ay)が省略された場合はB・C・Dの各xy軸に指定した値が、Aに近い順からAx(Ay)の値として解釈される。
- Bx(By)が省略された場合はAx(Ay)の値がBx(By)の値として解釈される。
- Cx(Cy)が省略された場合はAx(Ay)の値がCx(Cy)の値として解釈される。
- Dx(Dy)が省略された場合はBx(By)の値がDx(Dy)の値として解釈される。
基本的に各コーナーのx軸とy軸をペアで指定しますが、x軸とy軸がペアになっていない場合（x軸が1つ、y軸が2つなど）でも先のルールが適用されます。なので特定の部位のみに効果を適用する場合は、他のコーナー部分に必ず 0px（ゼロ・ピクセル）を指定する必要があります。
具体的にはAx(Ay)に角丸効果が必要無い場合は、Ax=0px、Ay=0pxを指定しないとB・C・Dの何れかに指定した値がAx、Ayとしてセットされ、以降は順送りで値がセットされてしまいます。
各 x軸・y軸方向の合計値が W・Hサイズの最大値（600px）を超える場合でも描画を実行しますが、指定する値の組み合わせによりラインが一部消失するなどの不具合が発生します。