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を使わずにロールオーバーする方法のご紹介。

サンプルはこちら

久しぶりのグローバルナビです。今回も前回同様のテクニックですが、グローバルメニュー下部にボーダーを追加してみました。今回も画像は使っておりません。

サンプルはこちら

シンプル見出しシリーズ第6弾。今回もボーダーを使ってのデザインです。

サンプルはこちら

シンプル見出しシリーズ第5弾。今回もボーダーを使ってのデザインです。

サンプルはこちら

今回はhタグとstrongタグを使った併せ技！

サンプルはこちら

背景画像を使った見出し（タイトル）です。左上にグラデーションのかかった画像を配置することによって、万が一タイトルが2行のなってしまっても見た目の違和感をなくすことができます。

サンプルはこちら

シンプル見出しシリーズ第3弾。今回もボーダーを使ってのデザインです。よく見かけるあれです。

サンプルはこちら