paddingとmarginを使って角丸っぽく見せるCSS[CSS]

マークアップ例は以下です。

HTML

<div class="outer">
	<div class="inner">box</div>
</div>

CSS

.example2 .outer {
	background:#0cc;
	margin:0px 1px; padding:1px 0px;
}
.example2 .inner{
	background:#cc0;
	margin:0 -1px;
	border:1px solid #0cc;
	border-top-width:0;
	border-bottom-width:0;
}

発想はおもしろくすごいと思うのですが、divタグを入れ子にしなければならにのがかなり微妙な感がします。ならばごく普通にCSS3で設定したほうがよいのではないかと思います。