CSSだけで角丸ボックス作れたらラクでいいですよね。
画像はちょっと面倒だし、余計な画像を作りたくないし。
と、いう訳で探しました。
いっぱい見つけましたが、私が選んだのは
javascriptなど使わずにできるこれ。
Snazzy Borders
[CSS]
#xsnazzy .xtop, #xsnazzy .xbottom {display:block; background:transparent; font-size:1px; }
#xsnazzy b { display:block; overflow:hidden; }
#xsnazzy .xb1, #xsnazzy .xb2, #xsnazzy .xb3 {height:1px; }
#xsnazzy .xb2, #xsnazzy .xb3, #xsnazzy .xb4 {background:#FFF; border-left:1px solid #CCC; border-right:1px solid #CCC; }
#xsnazzy .xb1 { margin:0 5px; background:#CCC; }
#xsnazzy .xb2 { margin:0 3px; border-width:0 2px; }
#xsnazzy .xb3 { margin:0 2px; }
#xsnazzy .xb4 { height:2px; margin:0 1px; }
#xsnazzy .xboxcontent { display:block; background:#FFF; border:0 solid #CCC; border-width:0 1px; }
[html]
<div id="xsnazzy">
<b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<h3>ダミーダミーダミーダミー</h3>
<p>ダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミーダミー</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b>
</div>