角丸を簡単に作れる『curvyCorners』-JavaScript Library Archive

角丸を簡単に作れる『curvyCorners』

配布元：curvyCorners
ライセンス：General Public License

curvyCornersはボックスの角を丸く表現してくれるライブラリになります。

設置方法

rounded_corners_lite.inc.jsファイルをhead要素で読み込みます。

<script type="text/javascript" src="rounded_corners_lite.inc.js"></script>

次に、角丸にしたいブロックレベル要素にclass属性を付けて配置します。

<div class="myBox">
さんぷるさんぷるさんぷるさんぷるさんぷる<br />
さんぷるさんぷるさんぷるさんぷるさんぷる<br />
さんぷるさんぷるさんぷるさんぷるさんぷる<br />
さんぷるさんぷるさんぷるさんぷるさんぷる<br />
</div>

スクリプトでcurvyCornersを実行します。

settings = {
 tl: { radius: 20 },
 tr: { radius: 20 },
 bl: { radius: 20 },
 br: { radius: 20 },
 antiAlias: true,
 autoPad: true,
 validTags: ["div"]
}

それぞれの項目には以下の意味があります。

tl(top left)→左上の角の半径
tr(top right)→左上の角の半径
bl(bottom left)→左下の角の半径
br(bottom right)→右下の角の半径
antiAlias→アンチエイリアスの設定(trueとfalse)
autoPad→ボックス要素のマージンの設定trueにすると上下左右に適度なマージンが設定されます。falseにすると上下にはマージンが設定されますが、左右には設定されません。

角丸はCSSでやるのはめんどくさいですし、余分な要素が増えたりするので、これがjsライブラリでできるとすっきりします。

サンプル