JavaScript の角丸ライブラリについて調べていたら、RUZEE.Borders というのを見つけました。

こいつがかなりすごかったのですが、ついでに他の角丸ライブラリとも比較してまとめておきます。どれも画像は使用せず、div タグなどをいっぱい作成して丸く見せている力技のライブラリです。

他にもいいのがあったら教えてください。

Nifty Cube

→サンプル

• Nifty Corners の後継。
• 9KB (+CSS 2KB)
• 角のサイズは 10px, 5px, 2px の３つから指定
• border は指定不可能 (div の入れ子により border っぽく見せることはできる)
• 背景画像への対応不明
• CSS セレクタ(一部)で指定可能

transcorners

→サンプルは transcorners のサイト上部

• mootools 必須。prototype.js との組み合わせムリ（たぶん）
• 4KB (+mootools)
• 角のサイズ自由
• border 指定可能
• 背景画像への対応不明
• CSS セレクタは mootools の getElementsBySelector との組み合わせにより(一部)可能

RUZEE.Borders

→サンプルは RUZEE.Bordersのサイト全体

• 角丸だけでなく、影付き、アンチエイリアス(というよりも、ぼかし)、光彩が可能。
• 18KB
• 角、影、ぼかし、光彩のサイズが自由自在。複数の効果を同時に適用可能。
• border、背景画像にも対応
• 付属の cssquery2-p.js (6KB) と併用することで、CSS セレクタでの指定可能。cssQuery を使用しない場合は ID のみでの指定

まとめ

手軽に試すには Nifty Cube、機能を求めるなら RUZEE.Borders、mootools を使ってるなら transcorners。

追記

• curvyCorners というライブラリもあるようです。画像を各丸にする機能が特徴的です。詳細は未調査です (2006.12.24)
• JavaScript を利用しない方法については、角丸に関するあれこれ (WWW WATCH) がうまくまとまっています。