CurvyCornersはJavascriptでdiv要素に対して四角い角を丸くします。ライブラリーに依存しないので単独で使用でき、Javascriptファイルをhrmlヘッダーに読み込むだけで使用できます。角の画像を使用しなくていいという面ではかなり便利ですが不利な条件もあります。

Advantage

• 画像を使わずにdiv要素のIDやクラスを指定するだけで角を丸くできる。
• ライブラリーに依存しないのでファイルをダウンロードして読み込み設定をするだけで、導入が簡単。
• アンチエイリアスがかかるので曲線がなめらか。

Disadvantage

• その他のJavascriptと衝突することがある。
• CSSの継承をしない。
• html全体の読み込みがやや遅い。

といいつつもかなり便利なツールですし導入も容易です。Javascriptのソースを見てみると丸い角はすべてCSSに変換されて表現しているようです。つまり1pxごとに CSSでもって位置を決めているので見えない部分で膨大なCSS情報を読み込まなくてはならないということになっています。現在のインフラでは問題が殆どありませんが、ネットワークが混んでいる際にはやや読み込みが遅いです。
　またフォームの入力エラーを吹き出しで教えてくれる JavaScriptとCurvyCornersは少しばかり衝突する模様。フォームに書いた文字を次のページに送ってから戻るボタンを押すと通常フォームに書かれた文字は残っていますがすべて消えてしまいます。通常の使用方法においては殆ど問題がないと思います。

ダウンロード先　http://www.curvycorners.net/downloads.php

CurvyCornerｓの使い方

　ダウンロード先からファイルを入手したら適当な場所で解凍してください。使用するWebサーバーにアップロードし、適用したいHTMLヘッダー内にcurvycorners.jsを読み込みます。パスは正しく設定しましょう。例えばこんな感じです。

<script type="text/JavaScript" src="http://example.com/javascript/curvycorners/curvycorners.js"></script>

　それから丸い角の大きさや場所などを設定します。上記と同様にHTMLヘッダー内に、

<script type="text/javascript">
　　window.onload = function()
　　{
　　　　settings = {
　　　　　　tl: { radius: 20 }, //左上の角の大きさ
　　　　　　tr: { radius: 20 }, //右上の角の大きさ
　　　　　　bl: { radius: 20 }, //左下の角の大きさ
　　　　　　br: { radius: 20 }, //右下の角の大きさ
　　　　　　antiAlias: true, //アンチエイリアス
　　　　　　autoPad: true //オートパディング
　　}
　　　　　　var myBoxObject = new curvyCorners(settings, "CSSのclass名またはID");
　　　　　　myBoxObject.applyCornersToAll();
　　}
</script>

　CSSに適用できるクラスとIDはdiv要素のみです。その他の要素には適用できないので注意してください。クラス名やIDはそのまま「.class」または「#id」と書きます。
　最後にここで設定したクラスやIDをCSSファイルで設定してください。CSSで設定したデザインで角が丸く表現されます。(余談ですが、デザイン的にborderの設定、あるいは背景色の設定をしないと丸い角が見えません！）