ZiSTA

スタイルシートで、あるボックスを角丸ボックスになるようにするには、背景として画像を適用する事によって実現します。

スタイルシートでは、1つの要素に１つの画像を背景に指定できるというのがポイントです。角丸ボックスの高さと幅を固定せずに長さを自由に変えられるようにするかどうかによって角丸ボックスを実現する方法が異なります。自由度を高い方がHTMLとCSSが複雑になってゆきます。

A. 高さも幅も固定
B. 幅が固定、高さが自由
C. 幅が自由、高さも自由

自由度を高めるには、背景画像を分割してゆきます。Aなら1つの画像、Bなら3つ,Cなら6つ画像に分割して使用します。CSSでは1つの要素につき１つの画像なので分割した画像の数だけHTMLの要素も必要になります。例えば、もっとも自由になるように画像を上左/上右/ボディ左/ボディ右/下左/した右の6つに分割した場合には、HTMLでも6つの要素を用意します。要素はDIV,SPAN,H,Pなどを使います。

""
<div class="roundBox">
<div class="head"><span></span></div>
<div class="body">本文</div>
<div class="footer"><span></span></div>
</div>
""

CSSでは、HTMLの各要素に対してそれぞれ対応する画像を背景として指定します。その際背景の位置（background-position）を右寄せ（top right）や左寄せ（top left）で指定します。