jquery.corner.js/画像を使わず、簡単に角丸ボックス化

■対象フレームワーク■
jquery.js

■必要なプラグイン■
jquery.corner.js

■構文■
デフォルトの場合



角丸の大きさを指定する場合
$('#sample').corner("30px");/*全ての角に30pxの大きさ*/

角丸箇所と大きさを指定する場合
$('#sample').corner("top 30px"); /* id="sample"の要素に対して、左上、右上に30pxの大きさ */
$('#sample').corner("top 30px"); /* id="sample"の要素に対して、左上、右上に30pxの大きさ */
などとできる。

さらに個別に指定したいときは、
 tl……左上コーナー、tr……右上コーナー
 bl……左下コーナー、br……右下コーナー
で、指定できるので

$('#sample').corner("tl 30px"); /* id="sample"の要素に対して、左上に30pxの大きさ*/
などとできる。

class="sample2" に対して効果をかけたいときは、
$('.sample').corner("tl 30px"); /* class="sample2"の要素に対して、左上に30pxの大きさ */
と、cssと同じように記述する。


■参照サイト■
マジで簡単!!画像を使わず角丸を実現するjQuery Cornerbyバシャログ。