どうも、クリエーターの田中常雄です。
角丸のボックスを再現する場合、90年代から伝わる背景画像を用いる手法で再現している方も多いのではないでしょうか？
しかしCSS3では意図も簡単に再現可能です。
簡単な角丸ならば下記のように記述するだけ。
下記はボックスの角を半径5pxに丸める場合の例です。
しかし残念な事にこの「border-radius」はCSS3の草案段階のプロパティなので、IEには実装されていません。
そんな時はjQueryのライブラリ「jquery.corner.js」を使うという方法が有ります。
JavaScriptを切っている環境では当然動きませんが、今時そんな事は無いでしょうから問題無いでしょう。
jquery.corner.jshttp://malsup.com/jquery/corner/
htmlのhead内に下記のように記述するだけでOKです。
下記はボックスの外側の背景が白でボックスの角を半径5pxに丸める場合の例です。
必要に応じて4行目の引数を改変すればOKです。
