before,after疑似要素を使ってCSSだけで角丸を実現する

角丸と言うと、テーブル使ったり、Javascript 使ったり、余計なタグ書いたりして実現していることが多いんですが、そういう面倒で(コードが)美しくない方法 ではありません 。

基本的に CSS と画像だけで実現します。ブロック要素ひとつ使うだけで、あとは余計なものは一切ありません。というわけでサンプル。

HTML が非常に手抜きかついい加減なのは突っ込まないでください。(正直かくのが面倒だった)

どうやって角丸にしているかはソース見てもらった方が早いですが、

.round:before {
display : block ;
content : url("./nw.gif") ;
background : transparent url("./ne.gif") no-repeat scroll 100% 0% ;
}

な感じで指定しています。ちなみにサンプルにも書いてありますが、before 疑似要素と after 疑似要素を使っているため、Internet Explorer6 みたいに CSS の実装がアレだとうまいこといきません。

たぶん、

あたりの最新版でうまいこと表示できるとは思いますが、WinXP の Firefox2 でしか表示確認してないため他がどうなってるかは知りません。

元ネタ

caramel*vanilla のエントリ CSS でドロップ&シャドウで lomo さんが紹介されていた Drop Shadow CSS が before,after 疑似要素を使っているのをみて、「これで角丸できるんじゃね？」と思ってやってみたらできた。という話です。

ぶっちゃけどこかの誰かがすでにやってるような気がする。あと IE(Internet Explorer)だと動かない。IE--。IE7 だとどうなってるのかは調べてない。

角丸ジェネレータらしいです。便利。