角丸 [背景画像あり]

背景画像を使用して、角丸ボックスを実現します。

各角に利用する画像を用意します。

このとき、○○○_l ＋ ○○○_rの横幅がボックス幅より短い場合、背景が途中で切れるので注意が必要です。○○○_lの横幅を1000px程度に設定しておけばおｋ。

.kadomaru_box  { width:200px; }
.kadomaru_header_l,
.kadomaru_header_r,
.kadomaru_footer_l,
.kadomaru_footer_r,{
  font-size:1px;
  height:8px; /* 角丸画像の高さに合わす */
}
.kadomaru_header_l { background:url(kado_header_l.gif) no-repeat 0px 0px;}
.kadomaru_header_r { background:url(kado_header_r.gif) no-repeat right 0px;}
.kadomaru_footer_l { background:url(kado_footer_l.gif) no-repeat 0px 0px;}
.kadomaru_footer_r {background:url(kado_footer_r.gif) no-repeat right 0px;}
.kadomaru_box_contents { padding:0 8px; background-color:#ccc; /* 角丸画像の色に合わす */}

<div class="kadomaru_box">
  <div class="kadomaru_header_l">
    <div class="kadomaru_header_r"></div>
  </div>
  <div class="kadomaru_box_contents">
    <!-- 文章などを記述 -->テキストテキストテキストテキスト
  </div>
  <div class="kadomaru_footer_l">
    <div class="kadomaru_footer_r"></div>
  </div>
</div>