Canvas : 角丸で、指定サイズ BOX の内側を指定の太さで線を引く

単純に、Canvas : 指定サイズ BOX の内側を指定の太さで線を引く 
を発展させたものです。線の太さを考慮して座標を移動しつつ、直線と
円弧を交互に引いています。

※ 最後の引数は、角丸の半径ですが、0 にすると長方形が描かれます。
※ 本来は、arc を実行しないようにするべきですが、拡張の可能性を
※ 考えてそのままにしています

<div id="target"><input type="button" value="BOX の内側を指定の太さで線を引く(角丸)" onclick='drawMyBox()'><br></div>
<script type="text/javascript">
function drawMyBox() {
	var canvas = document.createElement("canvas");
	if ( ! canvas || ! canvas.getContext ) {
		return false; 
	}
	else {
		canvas.setAttribute("width", "200");
		canvas.setAttribute("height", "300");
	}
	document.getElementById("target").appendChild(canvas)
	var ctx = canvas.getContext('2d');

	box( ctx, 0, 0, 200, 300, 20, 40 )

	function box(c,x,y,w,h,lw,sz) {

		c.beginPath();
		c.moveTo(x+(lw/2)+sz, y+(lw/2));
		c.lineTo(x-(lw/2)+w-sz, y+(lw/2));
		c.moveTo(x-(lw/2)+w, y+(lw/2)+sz);
		c.lineTo(x-(lw/2)+w, y-(lw/2)+h-sz);
		c.moveTo(x-(lw/2)+w-sz, y-(lw/2)+h);
		c.lineTo(x+(lw/2)+sz, y-(lw/2)+h);
		if ( sz == 0 ) {
			c.moveTo(x+(lw/2), y+h-sz);
		}
		else {
			c.moveTo(x+(lw/2), y-(lw/2)+h-sz);
		}
		c.lineTo(x+(lw/2), y+(lw/2)+sz);

		c.arc(x+(lw/2)+sz, y+(lw/2)+sz, sz, 180*Math.PI/180, 270*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y+(lw/2)+sz, sz, 270*Math.PI/180, 360*Math.PI/180, false );
		c.arc(x-(lw/2)+w-sz, y-(lw/2)+h-sz, sz, 0*Math.PI/180, 90*Math.PI/180, false );
		c.arc(x+(lw/2)+sz, y-(lw/2)+h-sz, sz, 90*Math.PI/180, 180*Math.PI/180, false );

		c.lineWidth = lw;
		c.stroke();
	}

}
</script>

HTML5

Google Chrome の type="date" で表示される datepicker の最も使いどころは、フレームをまたいで表示されるところです

IFRAME が各ブラウザで現在(2013/03/13)どのように振る舞うかのマトリックス

Canvas : 角丸の DIV を CSS3 では無く Canvas で表現すると、こうなります。( IEは 9以上 )

Canvas : IE8も 角丸で BOX の内側を指定の太さで線を引く

Canvas : 指定サイズ BOX の内側を指定の太さで線を引く

HTML5 : 最も簡単な「required 属性」による未入力チェック

HTML5 : 画像にテキストを重ねて少し回転して「名前を付けて画像を保存」するとどうなるか

HTML5 : canvas 要素に画像をロードする