roomx.jp

Room No.1

CSS

【CSS3】 border-radius:角丸指定のシミュレーション

これまで画像を隅に配置するなどして表現していた角丸図形ですが、CSS3から新たに追加されたborder-radiusプロパティを使えば、シンプルな記述で簡単に角丸図形が表現できる様になりました。

CSS3に対応したブラウザでないとborder-radiusプロパティを指定しても単なる四角形として表示されるだけですが、最低でも四角形は表示されるので、角丸図形でないと操作等に影響が出る場合を除いて積極的に使い易いCSS3プロパティの一つだと思います。

この項はborder-radiusプロパティを使って角丸図形を表現する場合、各部位に対して指定する半径の値(ピクセル単位)が実際にCSSでどの様に記述されるかを確認する為に造りました。
(つまり自分はまだborder-radiusプロパティに慣れていないって事ですw)

シミュレーションという程のモノでは有りませんが、各部に数値を入力し【図形描画】をクリックすると入力数値に応じた角丸図形と対象要素のCSSが表示されます。

※width、hightは1~600の範囲で、各コーナー部の角丸半径は0~300の範囲内の数値で指定が可能です
※width、hightが空欄の場合は最大値の600が指定されたものとして処理します
※各コーナー部の各角丸半径が空欄の場合は指定無しとしてルール(後述)に則り処理します
※borderプロパティは実線、太さ1px、カラーは青(#0000FF)固定です
※CSS3に対応していないブラウザ( IE6/7/8 など)では角丸図形として表示されません

W:px
Ay:px
Ax:px
H:px
Dx:px
Dy:px
By:px
Bx:px
Cx:px
Cy:px

各コーナー部(計8箇所)全てに値を入れた場合のCSSに於けるborder-radiusプロパティの表記は
border-radius: Ax Bx Cx Dx / Ay By Cy Dy;
となります。

ポイントA(左上)を起点として時計回りに、途中の【/】スラッシュを境にして水平(x軸)と垂直(y軸)のペアで値を指定するわけですが、【/】を省略し4つの値のみを指定すると各コーナーの水平(x軸)と垂直(y軸)に同じ値が指定されたものとしてブラウザが解釈します。

各コーナー部全てに値を指定する必要はありませんが、その場合には以下のルールが適用されます

 

基本的に各コーナーの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)を超える場合でも描画を実行しますが、指定する値の組み合わせによりラインが一部消失するなどの不具合が発生します。

▲BACK TO TOP