枠線の角を丸くする

<style>
	#underline {
		position: relative;
		width: 600px; height: 3px;
		overflow: hidden;
	}
	#underline div {
		position: absolute;
		width: 1px; height: 1px;
		overflow: hidden;
	}
	#underline div.level1 {
		background-color: #d0d0d0;
	}
	#underline div.level2 {
		/* 曲線を滑らかに見せるための薄い色の部分 */
		background-color: #e3e3e3;
	}
</style>
<div id="underline">
	<!-- 下の枠線 -->
	<!--左曲線--><div class="level1" style="top: 0px; left: 0px;"></div>
	<!--左曲線--><div class="level2" style="top: 0px; left: 1px;"></div>
	<!--左曲線--><div class="level1" style="top: 1px; left: 1px;"></div>
	<!--左曲線--><div class="level2" style="top: 1px; left: 2px;"></div>
	<!--右曲線--><div class="level1" style="top: 0px; right: 0px;"></div>
	<!--右曲線--><div class="level2" style="top: 0px; right: 1px;"></div>
	<!--右曲線--><div class="level1" style="top: 1px; right: 1px;"></div>
	<!--右曲線--><div class="level2" style="top: 1px; right: 2px;"></div>
	<!--下直線--><div class="level1" style="width: 596px; top: 2px; left: 2px;"></div>
</div>

　もうちょっとスタイリッシュにできないもんか。

　あと、IEだと描画にミスる。