googleに学ぶ角丸の作り方（html、css）

グーグルがこの前始めた、最新検索では、 吹き出しのような表示がある。

そこの吹き出しから軽量な角丸の作り方を学ぶことができる。
一つ目の画像：
二つ目の画像：

グーグルが置いてる画像はこの二つだけ。
それに対し角丸を置いてるサイトの画像を見てみると、四角形の上部の辺を全て画像にしているサイトも多い。
グーグルの方法だと
・横幅を柔軟に変更できる
・画像サイズがもっとも軽量
という利点がある。

吹き出し部分の画像は特に必要ないので、それを取り除いて実際に角丸を作ってみた。

	角丸の中の テキスト

ここでは、２つの画像を使っている。

http://sikaku-chat.com/stt/circle/bg0.png
用途：角丸の角、四角形の左辺と右辺に対応

http://sikaku-chat.com/stt/circle/bg1.png
用途：四角形の上辺、下辺に対応

ソース部分のポイントは３つだけ
・background-position を指定し、円の画像からうまく角丸を作成
・全体的にtable を使用
・角丸部分には box のfloatを使用

こう見るとたいしたことはやっていない。
知らなかったのは、float container に table の要素が使えることだろうか。
float container ってtable使えばよかったのか？