ネットでCSSを使って角を丸くする方法が紹介してありました。

現在のところFirefox3ではきちんと表示されるのですが、IE7やOpera10では表示されませんでした。

通常の背景画像を角丸PNGを使ったりSPANタグを使ってする方法が間違いないと思いますが、このような方法もあるということだけ紹介します。

背景画像の部分のDIVタグにCSSで
-moz-border-radius-bottomleft:30px;
-moz-border-radius-bottomright:30px;
-moz-border-radius-topleft:30px;
-moz-border-radius-topright:30px;

とCSSで指定するだけです。

この方法のメリットは次の通りです。

  • 背景画像を丸角で用意する必要がない。（四角画像でよいのでリピート指定ができる）
  • ボーダーを指定してもきちんと角丸に表示される。
  • 軽い
  • 丸の具合をpxで指定できるので、修正が簡単。

この方法で、IE7やOperaなどで表示されるようになれば、かなり実用性が高いのですが・・・。

何かしら方法はあるのでしょうが・・・。

ネタ元はこちらです。

http://css-tricks.com/blurry-background-effect/

英語ですが、データのダウンロードができるので、わかりやすいと思います。