角丸にしたい際、CSS3の「border-radius」を使えれば簡単に角丸を作れるのですが、ブラウザごとの対応も異なっているので、現状はまだ難しいですよね。
そんな時に便利なのが、DD_roundiesです。DD_roundiesは、画像を使用せずに角丸を表現できるJavascript(JS)ライブラリです。軽量かつ角丸のサイズを簡単に個別指定できるところが魅力です。jQueryなどを利用せずDD_roundies単体で動作します。
Internet Explore6,7,8、FireFox、Chrome、safari、Operaといった主要なブラウザにしっかり対応しているところも嬉しいかぎりです。
…と思ったらIE8の場合、角丸にはなるのですが、背景画像が表示されていないようですね。
使用方法は簡単で、ダウンロードしたファイルを外部ファイルで読み込み、スクリプトでidやクラスごとに角丸のサイズ指定をします。
記述例)boxというクラスの4角すべてをサイズ5pxで角丸にする場合
DD_roundies.addRule('.box' , '5px' ,true);
記述例)boxというクラスの個別に角丸サイズを指定する場合 DD_roundies.addRule('.box' , '0px 5px 10px 20px' ,true);
この例では、左上0px、右上5px、右下10px、左下20pxで指定しています。