[JS]div要素に角丸やフェードのボーダーをスタイリングするスクリプト -DivCorners

Post on:2010年3月2日

sponsors

div要素で配置した矩形に、シンプルなボーダーや角丸、フェードのボーダーをスタイリングするスクリプトをroydukkeyから紹介します。

ボーダーは矩形の内側と外側に指定して配置することが可能で、ボーダー自体の幅や高さを指定してスタイリングすることができます。
上記キャプチャは、外側（outside）のデモです。

スクリプトの現在の仕様では、角丸やフェードのボーダーには画像が使用されており、下記のイメージで実装されています。

実装のイメージ

スクリプトの将来のバージョンでは、画像無しのスタイリングも加わる予定とのことです。

DivCornersはjQueryのプラグインのため、実装にはjquery.jsが必要です。