jQuery corner.jsを使ってboxの角を装飾。CSS3非対応のIE8以下にも対応させる。

jQueryプラグインjquery.corner.jsを使ってboxの角を装飾します。例は角丸が主ですが、その他の形状もいろいろ使えます。ボタンをクリックすると、boxの角の形状を変化させます。「テスト用BOX-4」のみ、モダンブラウザ用にあらかじめCSS3のradiusの指定をしています。

形状の指定は、htmlとスクリプトで行うものがあります。位置指定は、無指定で4角、[left]で左側2角、[right]で右側2角、[top]で上側2角、[bottom]で下側2角、[tl]で左上のみ、[tr]で右上のみ、[bl]で左下のみ、[br]で右下のみ。形状を複合して指定することもできます。

IEでテストした結果から、jquery.corner.jsを使う際は、次の2点を避けた方が無難なようです。

テスト用BOX-1
4角をすべて角丸にします。角丸のサイズは、html内の"data-corner"で指定しています。
IEは、9がOK。6〜8も対応していますが、元のcssのborderが削除されます。 
	<div id="dynamic2" data-corner="20px"...

テスト用BOX-2
左側2角を角丸にします。角丸のサイズは、html内の"data-corner"で指定しています。
IEは、9がOK。6〜8も対応していますが、元のcssのborderが削除されます。 
	<div id="dynamic" data-corner="35px"...

テスト用BOX-3
右上角のみ折り曲げた形状にします。スクリプトで指定しています。
IEは、6〜9も対応していますが、元のcssのborderが削除されます。この場合、他のモダンブラウザでもborderが削除されます。 
	$('#dynamic5').corner( "tr dog2");...

元の角丸のサイズを変更します。解除すると元のCSS3指定の角丸も解除されます。IEは、6が非対応、7〜8が対応、逆に9の動きがおかしいです。
テスト用BOX-4-1 テスト用BOX-4-2 テスト用BOX-4-3




jQuery Corner：http://jquery.malsup.com/corner/