html

<div class="box_01">
<div class="box_02">
<ul>
<li><a href="#">あいうえお</a></li>
<li><a href="#">あいうえお</a></li>
<li><a href="#">あいうえお</a></li>
<li><a href="#">あいうえお</a></li>
<li><a href="#">あいうえお</a></li>
</ul>
</div>
</div>

css

.box_01 {
	background: url(images/box_01.gif) no-repeat top;
	width: 261px;
	padding: 5px 0 0 0;
}

.box_02 {
	background: url(images/box_02.gif) no-repeat bottom;
	padding: 10px;
}

角丸グラデーションを使ったボックスの作り方。
２枚の画像を使って作ります。
divを入子にしてbox_01に角丸上部分の画像を指定。box_02に背景部分から下の角丸部分の画像を指定します。

注意：box_02に指定している背景画像の高さ以上に中身がある場合は途中で画像が切れてしまいます。

当サインプルは高さを2000pxまで表示可能です。

サンプルDLはこちら

今はjavascriptでやるのが主流？
とりあえず今回はCSSで対応しました。

div {
    min-height: 100px;
    height:auto !important;
    height: 100px;
}

CSSにて背景画像（画像置換）をしてリンクを付けている場合、Firefoxで閲覧するとはみ出てアウトラインが表示されてしまいます。
そこでこのアウトラインを表示させない方法のご紹介。

前々から画像置換を使ったボタンってどうなの！？って思っていました。
そこでjavascriptを使わずにロールオーバーする方法のご紹介。

サンプルはこちら

pdfやdocなどの決まった拡張子にCSSを使って自動でアイコンを表示させる方法がphpspot開発日誌に紹介されていました。
とっても便利なのでゼヒ使ってみましょう。
※IE6では表示されないのでjavascriptと組み合わせる必要があります。

サンプルはこちら

ちょっとした時などに、わざわざ新しくCSSを定義しなくてもリスト風のスタイルがtext-indentでできます。

サンプルはこちら