見出しなしのテキストのみ場合

XHTML
    <div class="column">  
        <div class="inner">  
        <div>  
            <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
            <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
            <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
        </div>  
        </div>  
    </div>  
CSS
div.column{
	width: 570px;
	background: url(kahen/bottom.jpg) no-repeat bottom;
	padding-bottom: 25px;
	margin-bottom: 40px;
 	margin-left:40px;
}
div.column .inner{
	background: url(kahen/top.jpg) no-repeat;
	padding-top: 25px;
}
div.column .inner div{
	background: url(kahen/center.jpg) repeat-y;
	padding: 0 20px;
}

1. 全体を包むdiv(.column)にボックスの下に来る部分の画像を読ませる。

2. その中にもう一つdivを用意し、このにボックスの上部に来る画像を読み込ませる。

3. div(.inner)の中にもう一つdivを用意し、このボックスの中部に来る画像を読み込ませる。

見出しありの場合

XHTML
<div class="column">  
    <div class="body">
    	<h4>見出し</h4>
            <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
            <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
            <p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
    </div>
</div>
CSS
div.column h4{
	background: url(kahen/top.jpg) no-repeat;
	padding: 25px 25px 0;
	margin: 0 -20px 10px;
}
div.column .body{
	background: url(kahen/center.jpg) repeat-y;
	padding: 0 20px;
}

1. 全体を包むdiv(.column)にボックスの下に来る部分の画像を読ませる。

2. div(.column)に中にもう一つdiv(.body)を用意し、このボックスの中部に来る画像を読み込ませる。

3. 見出し要素(上記説明の場合h4)に上部に来る画像を読み込ませる。(marginを左右に -20pxする事でpaddingの左右20pxを相殺しています。)

dlで作った場合

XHTML
<dl class="column">
	<dt>見出し</dt>
		<dd>
        	<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
        	<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
        	<p>CSSで可変対応した角丸のボックスのサンプルCSSで可変対応した角丸のボックスのサンプル</p>
    	</dd>
</dl>
CSS
dl.column{
	background:url(kahen/center.jpg) repeat-y;
	margin-left:40px;
}
dl.column dt{
	background:url(kahen/top.jpg) no-repeat;
	padding:25px 25px 10px;
	font-weight:bold;
}
dl.column dd{
	background:url(kahen/bottom.jpg) no-repeat bottom left;
	padding:0 25px 25px;
}

1. dl(.column)にボックスの中部分の画像を読ませる。

2. dtに上部に来る画像を読み込ませる。(上、左右のpadding調整)

3. ddに下部に来る画像を読み込ませる。(下、左右のpadding調整)