この方法ってもしかしたら結構有名なのかもしれませんが、あまり動的なことって知らないので・・・。
まずは、私が面白いと思ったサンプルをご覧ください。
Transparent rounded/custom corners and borders | Lab | 456 Berea Street

ブラウザを徐徐に小さくしてみてください。それにあわせて丸角のフレーム部分も小さくなります。つまり、リキッドレイアウトと呼ばれる構造になっています。

テキストに枠をつける方法を試した方がいるならわかると思うのですが、この場合、9つのに枠を決めて、真ん中にテキスト、その周りに画像を配置するという構造になります。
これをテーブルを組んでするのは結構簡単なのですが、CSSを使うとどうしてもブロック要素の入れ子（ネスト）をしなければ実現できません。（私の知る限り）

また、この場合、画像を表示するために空のブロック要素を使用する必要性が出てきます。うまくすれば空は防げるかもしれませんが、どちらにしろ、無意味なブロック要素が増えてしまうわけです。しかし、今のところ、CSSではこのようにするのが限界かもしれません。

そもそもデザインのために、HTMLのタグをいじるのは不本意なのですが、仕方がないこととします。
しかし、入れ子にすればするほど、ソースが見にくく、メンテナンスが難しくなります。
そこで、JavaScriptの登場です！
JavaScriptで画像表示のための追加ブロック要素を動的に生成するのです。そうすれば、HTMLソース自体は必要最小限に抑えることができます。

サンプルのページを右クリックして、ソースを見てください。
コードは最小限しか書いておらず、すっきりしています。しかし実は「cb.js」というJavaScriptファイルで画像を表示するためのコードを生成しているため、ブラウザ上には丸角の画像が表示されています。

これって、ただHTMLやCSSを知っているだけでは出てこない考え方だな～と思いました。
動的なプログラム（JavaScriptやJAVA、PHP）ももっと勉強しなきゃ！