CSSを用いた角丸の枠（フタ－中身－底）の作り方を教えてください。

質問

こんにちは。
こんな角丸の作り方が知りたいです。

フタ（画像）　　　┌─────┐（実際は角丸の画像）
中身（左右の罫線）│　　　　　│
底（画像）　　　　└─────┘（実際は角丸の画像）

下に記載したタグでやってみたところ、IE6ではうまく表示されますが、Firefoxでは、フタ部（底部）と中身部の間が空いてしまいます。

◆HTML
<div id="container-top"><img src="img/container-top.gif">
</div>
<div id="container">本文テキストがつづく。。。
</div>
<div id="container-bottom"><img src="img/container-bottom.gif">
</div>

◆CSS
div#container-top{
width:750px;
height:10px;
margin:0 auto;
padding:0;
}
div#container{
width:750px;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
margin:0 auto;
padding:0;
}
div#container-bottom{
width:750px;
height:10px;
margin:0 auto;
padding:0;
}

どうぞよろしくお願いいたします。

回答No.1

神崎 渉瑠（@taloo）

現象を確認できませんのでよくわかりませんが、overflow追加でどうでしょうか。
line-height:1px;でもできるかも知れませんが、私はこういうときはoverflowを使っています。
未検証です。

div#container-top{
width:750px;
height:10px;
margin:0 auto;
padding:0;
overflow:hidden;
}
div#container{
width:750px;
border-left:1px solid #cccccc;
border-right:1px solid #cccccc;
margin:0 auto;
padding:0;
}
div#container-bottom{
width:750px;
height:10px;
margin:0 auto;
padding:0;
overflow:hidden;
}