jQuery のプラグインである curvyCorners for jQuery を使って角丸を実現するためのモジュールです。

※ curvyCorners for jQuery とその設定をすべてのテーマの HTML 内に出力させるためにモジュール化したものです。
Rounded corners とは違って適用できるエフェクトの種類は角丸だけですが、ボーダーも含めた角丸が実現できます。また、背景に画像を使用することで画像の角丸も実現できます。
[ ダウンロード : http://drupal.0829.info/module/curvycorners ]

レビュー

[管理セクション] → [サイトの環境設定] → [curvyCorners] で、curvyCorners の設定を追加します。

1. すべてのコーナーに同一幅の角丸を設定する場合

上下左右すべてのコーナーに同じ幅の角丸を適用する場合、以下のようなフォーマットで 1行に 1つずつ入力します。
設定の入力は " 1行に 1つずつ" としていますが、複数の設定を行う場合にはその方が管理しやすいだろうということでそう説明させていただいているだけであって、実際にはそのまま HTML に出力されるので、スクリプトとして正しい書式であれば 1つの設定が複数行に渡っても全く問題ありません。

$("this").curvy("width corners");

• this
  設定した内容を呼び出すための HTML タグの属性を指定します。以下が例です。
  $("div.myBox").curvy();
  $("#curvy").curvy("20px top bottom")
• width
  角丸を適用する幅をピクセル（px）単位で指定します。
• corners
  角丸の対象とするコーナーを指定します。
  top（上）, bottom（下）, tr（右上）, tl（左上）, br（右下）, bl（左下） が指定できます。

2. それぞれのコーナーに異なる幅の角丸を設定する場合

上下左右それそれのコーナーに異なるピクセル幅の角丸を適用したい場合には、以下のようなフォーマットで記述を行います。

var settings = {
  tl: { radius: width },
  tr: { radius: width },
  bl: { radius: width },
  br: { radius: width },
  antiAlias: true or false,
  autoPad: true or false,
  validTags: ["tagname"]
};
$("this").curvy(settings);

• tl: { radius: width }, ～ br: { radius: width },
  それぞれのコーナーについて、角丸を適用するピクセル幅を width 部分に数値のみで指定します。
• antiAlias: true or false, および autoPad: true or false,
  アンチエイリアス（antiAlias）およびパディングの自動調整（autoPad）を有効または無効に設定します。
  有効＝true、無効＝false のどちらかの値のみを指定します。
• validTags: ["tagname"]
  特定のタグのみで設定した内容を呼び出す場合、tagname 部分にその HTML タグを指定します。
• $("this").curvy(settings);
  • this
    設定した内容を呼び出すための HTML タグの属性を指定します。
  • settings
    var で宣言した変数 settings を指定します。

以下がそれぞれのコーナーに異なるピクセル単位をした場合のサンプルコードです。

var settings = {
  tl: { radius: 5 },
  tr: { radius: 20 },
  bl: { radius: 20 },
  br: { radius: 5 },
  antiAlias: true,
  autoPad: true,
};
$(".myCurvy").curvy(settings);

設定の記述方法は2パターンありますが、それぞれのフォーマットで記述した内容をまとめて設定できます。
※ 設定方法の詳細は、curvyCorners Demo に記載されています。

スクリーンショット

curvyCorners Demo 1 または curvyCorners Demo 2 でデモが確認できます。
これらは jQuery に移植された元の JavaScript ですので設定方法は異なります。

注意事項など

このモジュールはモジュールのアンインストール機能に対応しています。
また、この JavaScript が対応しているブラウザは Firefox、Internet Explorer 6.0 以上、Safari、Opera 9 以上 となっています。それより古いバージョンのブラウザでは正常に表示できない可能性があります。

バグレポートや、問題点については以下で確認できます。

• curvyCorners forum :: Index
• Add border with rounded corners on nodes | drupal.org

（モジュールのバージョン名は jquery.curvycorners.js ファイルのバージョンにあわせています。）

改定履歴

[ 2007-06-04 ]
jQuery のロード部分を $(document).ready(function() から、これを省略した形の $(function() に変更しました。

日本語翻訳

同梱しています。