CSSサンプル - 背景画像＋CSSで作る幅をカスタマイズ可能な丸角ボックス

<div id="navi">
    <ul>
        <li>カテゴリ</li>
    </ul>
</div>

#navi{
    width:300px;  /* コンテナーの横幅　*/
}

#navi ul{
    margin:0px;
    padding:0px;

    background:transparent url(./img1.jpg) no-repeat scroll left top;/* 背景画像に幅の長い画像を指定 */
    height:30px;
}
#navi li{
    margin:0px;
    padding:0px;
    height:30px;
    background:transparent url(./img2.jpg) no-repeat scroll right top;/* 背景画像に幅の短い画像を指定 */
    padding:5px 0 0 15px;    
}