border-radius.js

黄色の四角形に茶色の枠線があります。その下にもう一つの四角形がありますが、色は同じです。しかし、四角形の4つの角が丸くなっています。

border-radius.js は、class属性に値を追加するだけで、ブロックボックス要素の角を丸くするライトウェイトなJavaScriptライブラリーです。

CSSでborderとmarginを指定し、class属性に "html5jp-border-radius" を追加するだけで、角が丸くなります。JavaScriptのコードは一切必要ありません。また、このライブラリーは単独で動作するため、他のJavaScriptフレームワーク等を読み込む必要もありません。

このライブラリーは、指定のブロックボックス要素の上下に角を追加します。Internet Explorerの場合はVMLを、それ以外のブラウザーではCanvas（Canvasがサポートされていれば）を使っています。

ダウンロード

Release Date Size (byte) Download
1.0.0 2008-11-25 14,255 border-radius_1_0_0.zip

対応ブラウザー

  • Internet Explorer 6, 7
  • Firefox 2.0以上
  • Opera 9.0以上
  • Safari 3.0以上（もしかしたら2.0でも動作するかもしれませんが、未確認です。）
  • Google Chrome 0.3以上

使い方

headタグで、border-radius.jsをロードするようscriptタグを記述しておきます。

<script type="text/javascript" src="../html5jp/border-radius.js"></script>

角を丸くしたいブロックボックス要素のclass属性に "html5jp-border-radius" を記述します。

<div class="html5jp-border-radius">角を丸くするdiv要素</div>

すると、このdiv要素は、次のように角が丸くなります。

適用前

枠線ありの場合

適用後

枠線ありの場合

適用前

枠線なしの場合

適用後

枠線なしの場合

table要素の角を丸くすることもできます。

適用前

都道府県 面積(km2) 人口(人)
※ 人口は2005年国勢調査の結果に基づく。
神奈川 2415.84 879万0900
千葉県 5156.58 605万6159
埼玉県 3797.25 705万3689
愛知県 5677.38 725万4432
大阪府 1896.83 881万7010

適用後

都道府県 面積(km2) 人口(人)
※ 人口は2005年国勢調査の結果に基づく。
神奈川 2415.84 879万0900
千葉県 5156.58 605万6159
埼玉県 3797.25 705万3689
愛知県 5677.38 725万4432
大阪府 1896.83 881万7010

角ごとに半径を指定する

このライブラリーでは、4つの角それぞれに、丸みの半径を指定することができます。また、特定の角だけに丸みを加えることも可能です。

個別指定する場合は、class属性に [top-left:5px;top-right:10px;bottom-right:15px;bottom-left:20px] のように記述します。全パラメータを [] で囲みます。そして、CSSの記述と同じように、プロパティー名と値をコロンで区切って宣言を作り、各宣言をセミコロンで区切ります。このパラメータには半角スペースを入れないでください。

半径20pxの角を指定する

radius を指定すると、4角すべてに適用されます。radius の値の単位はpxとしてください。

<div class="html5jp-border-radius [radius:20px]">...</div>
半径20pxの角を指定する

左側だけ半径10pxの角を指定する

left を指定すると、左上と左下の角に適用されます。left の値の単位はpxとしてください。

<div class="html5jp-border-radius [left:10px]">...</div>
左側だけ半径10pxの角を指定する

右側だけ半径10pxの角を指定する

right を指定すると、右上と右下の角に適用されます。right の値の単位はpxとしてください。

<div class="html5jp-border-radius [right:10px]">...</div>
右側だけ半径10pxの角を指定する

上側だけ半径10pxの角を指定する

top を指定すると、右上と左上の角に適用されます。top の値の単位はpxとしてください。

<div class="html5jp-border-radius [top:10px]">...</div>
上側だけ半径10pxの角を指定する

下側だけ半径10pxの角を指定する

bottom を指定すると、右下と左下の角に適用されます。bottom の値の単位はpxとしてください。

<div class="html5jp-border-radius [bottom:10px]">...</div>
下側だけ半径10pxの角を指定する

左上だけ半径10pxの角を指定する

top-left を指定すると、左上の角に適用されます。top-left の値の単位はpxとしてください。

<div class="html5jp-border-radius [top-left:10px]">...</div>
左上だけ半径10pxの角を指定する

右上だけ半径10pxの角を指定する

top-right を指定すると、右上の角に適用されます。top-right の値の単位はpxとしてください。

<div class="html5jp-border-radius [top-right:10px]">...</div>
右上だけ半径10pxの角を指定する

右下だけ半径10pxの角を指定する

bottom-right を指定すると、左下の角に適用されます。bottom-right の値の単位はpxとしてください。

<div class="html5jp-border-radius [bottom-right:10px]">...</div>
右下だけ半径10pxの角を指定する

左下だけ半径10pxの角を指定する

bottom-left を指定すると、左下の角に適用されます。bottom-left の値の単位はpxとしてください。

<div class="html5jp-border-radius [bottom-left:10px]">...</div>
左下だけ半径10pxの角を指定する

右上と左下に半径10pxの角を指定する

2つ以上の角を個別に指定することも可能です。

<div class="html5jp-border-radius [top-right:10px;bottom-left:10px]">...</div>
右上と左下だけ半径10pxの角を指定する

それぞれの角に異なる半径を適用する

それぞれの角に異なる半径を適用することも可能です。

<div class="html5jp-border-radius [top-left:5px;top-right:10px;bottom-right:15px;bottom-left:20px]">...</div>
それぞれの角に異なる半径を適用する

使用上の注意

  • このライブラリーは、HTMLがブラウザーに標準モードとして認識されないと動作しません。後方互換モードでは無視されます。
  • 利用可能な要素は、ブロックボックス要素に限ります。インラインボックス要素に適用しようとしても無視されます。
  • table要素にCSSでborder-collapseにcollapseがセットされている場合は、期待通りの結果にならない場合があります。現時点で分かっている問題として、Firefoxの場合にtable要素に適用されたborder-widthが0として処理されてしまいます。
  • 角を丸くしたい要素に対して、CSSで "border", "margin" を必ず明示的にセットしてください。style属性、style要素、link要素のいずれを使っても構いません。
  • CSS3で規定されているborder-radiusでは本来の縦幅を維持したまま角を丸くしますが、このライブラリーは該当要素の縦幅を上下に広げますので、注意してください。
  • 適用した要素の4辺それぞれに異なる border-width がCSSでセットされている場合は、最も太い線幅がすべての辺に適用されます。

バージョンアップ履歴

2008-11-25

  • ver 1.0.0 リリース

著作権・謝辞

著作権

Copyright 2007-2009 HTML5.JP

当サイトのJavaScriptライブラリは、Apache License, Version 2.0 のもとに配布します。