アンチエイリアスの角丸をJavaScriptで生成 （curvyCorners）

既にご存知の方も多い、curvyCorners。アンチエイリアス（anti-aliasing）処理された、角丸コーナーを生成してくれるJavaScript。同様の処理が可能なJavaScriptライブラリは多数存在するが、アンチエイリアス処理まで行うのは少ない。

JavaScriptライブラリがdiv要素を動的に生成し、角丸部分に適用している。比較的処理が早く、ストレスなく表示される。アンチエイリアス部分には1px単位でdiv要素が配置され、透明度の調整によって再現されている。

ボーダーのあるコーナー

写真にも適用可能

Firebugなどを利用してどのような構造になっているのか確認すると分かるが、写真に角丸コーナーを適用した場合、コーナー部分のdiv要素に背景画像としてを配置することで、違和感無く表示している。

curvyCornersを利用した場合、各コーナーの直径（px）で指定するが、数値が小さい方が、処理する回数も少なくなるので、表示も速くなる。逆に直径を大きくした場合、遅くなる。同一ページ中に複数の対象物を設置した場合も、処理回数が増えるので同様の結果となる。