CSSで角丸ボックス、の再考

CSSで角丸ボックスを作る時はボックスの上下に角丸にした画像をCSSで背景にして配置していますが、自分の今までのやり方は、

<div class="blockTop"></div>
<div class="blockMid">角丸ブロックです。</div>
<div class="blockBtm"></div>

としていました。この方法だとHTML-Lintで、「<div>~</div>の中に要素がありません」と怒られてしまう。表示上問題ないので今までほかっておいたんですが、そろそろ気持ち悪くなってきたのでちょっと考えてみました。要は要素が何か入っていればいいと。

以下のようにblockTopの中にblockBtmを入れ子にし、blockMidは削除。

<div class="blockTop">
 <div class="blockBtm">角丸ブロックです。</div>
</div>

CSSはこんな感じ。

.blockTop {
 padding-top:10px;
 width:200px;
 background:url(block_top.gif) no-repeat;
}

.blockBtm {
 padding-bottom:10px;
 width:200px;
 background:#D20000 url(block_btm.gif) no-repeat left bottom;
}

このやり方、きっと既出でしょうね。blockMidがいらなくなるので多少ソースもすっきりします。もっと早く気がつけばね〜。

CSSだけでなく、角丸ボックスにはいろいろな方法があるようで試してはいませんが、角丸ボックス・吹き出し：php & javascript roomにいろいろと載っています。