丸角/角丸ボックスをCSSをのみで作ってくれるジェネレータ
丸角/角丸(どっちが正解?)ボックスを作る方法はいろいろありますが、『Spiffy Corners』は画像を使わず、CSS+XHTMLのコードを生成してくれます。
■Spiffy Corners
http://www.spiffycorners.com/
TOP画面でclass名、色、角のカーブサイズを指定すると、下のほうにCSSとHTMLが生成されているので、それをコピペするだけです。
■CSS(出力例)
<style type="text/css"> .spiffy{display:block} .spiffy *{ display:block; height:1px; overflow:hidden; font-size:.01em; background:#b20000} .spiffy1{ margin-left:3px; margin-right:3px; padding-left:1px; padding-right:1px; border-left:1px solid #870000; border-right:1px solid #870000; background:#9f0000} .spiffy2{ margin-left:1px; margin-right:1px; padding-right:1px; padding-left:1px; border-left:1px solid #6f0000; border-right:1px solid #6f0000; background:#a30000} .spiffy3{ margin-left:1px; margin-right:1px; border-left:1px solid #a30000; border-right:1px solid #a30000;} .spiffy4{ border-left:1px solid #870000; border-right:1px solid #870000} .spiffy5{ border-left:1px solid #9f0000; border-right:1px solid #9f0000} .spiffyfg{ background:#b20000} </style>
■HTML(出力例)
<div> <b class="spiffy"> <b class="spiffy1"><b></b></b> <b class="spiffy2"><b></b></b> <b class="spiffy3"></b> <b class="spiffy4"></b> <b class="spiffy5"></b></b> <div class="spiffyfg"> <!-- content goes here --> </div> <b class="spiffy"> <b class="spiffy5"></b> <b class="spiffy4"></b> <b class="spiffy3"></b> <b class="spiffy2"><b></b></b> <b class="spiffy1"><b></b></b></b> </div>