角丸ボックスを作る〜テーブル
角丸のリストボックスを作ってみるっすか。

まずは、画像ソフトでテキトーに描く。
今回は190x150pxで作った。


できた画像をテーブル用にテキトーに切断。
いくらテキトーでも、縦横のサイズくらいは揃える。あとで困る。

こんなかんじでそれぞれの部品を切り出す。
それを３ｘ３マスのテーブルにぶちこむ。
それぞれのマスの背景に指定して、繰り返しの有無と
方向を指定する。
左右は固定。センターはリピート-X
テーブル用部品
 左右はリピート-Y。真ん中なし
左右は固定。センターはリピート-X

テーブルに以下を指定すると枠線が消えて画像が密着するはず
cellspacing="0" cellpadding="0" border="0"
ﾃﾞｷﾀ＼(^o^)／
サンプル
組んだらこうなる

サンプル・sample・サンプル・sample・サンプル・sample

真ん中枠は画像を使わず
同色の背景色を指定
（#CBDEE3）
ビルダーでぱっぱと作るならこんな感じか

角丸ボックスを作る〜.css
テーブル用に画像を細切れにするのがめんどくさい人は
cssのレイアウト枠で作りましょう。
最初からwidthに制約のあるサイドカラムにぶちこむ場合などは
このほうがわかりやすいかも。画像はwidth固定の3分割でおｋ
部品は三個 width=190 スタイル指定とか
トップ、固定。
background-repeat : no-repeat;
width : 190px;
height : 40px;
センター、リピート -Y
background-repeat : repeat-y;
width : 190px;
ボトム、固定。
background-repeat : no-repeat;
width : 190px;
height : 25px;
＜div＞ボックス三段重ねを設置して、それぞれの枠の背景に切り出した画像を指定します。
　サンプル・sample
　組んだらこうなる
ほんとは外枠ボックスの中に上中下のクラス指定した要素を入れるべきなんだろうけど、めんどくさいからこれでおｋ

サンプル・sample
さらに、中にwidth=160のテーブルを入れてみる
サンプル・sample・サンプル・sample・サンプル・sample・サンプル・sample・サンプル・sample・サンプル・

サンプル


↓可変でどんどん伸びる

※ここでの.cssの記述などはテキトーです。
.cssの扱い方は他の優良サイトなどを参考にしましょう。