border-radiusの斬新な解釈 [ CSS ]

以下のような感じで画像にborder-radiusを指定すると、Chrome13とFireFox6では想定通り角が丸くなった。
のだけど…Opera11はそうなってくれない。

-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

このブラウザ	Chrome	Opera

divとかに設定した場合はOperaでもちゃんと丸くなるところをみると、border-radiusという属性をサポートしていることはたしか。（しかもOperaプレフィックス無しの名前を解釈してくれてるのでCSS標準通り)

-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;

このブラウザ	Chrome	Opera
divに適用してみた

ならば、

画像をブロック要素で包み込んで、親ブロックの角を丸くしてoverflow属性をhiddenにしてやれば丸く見えるんじゃないか?

と思ったのだが、子ブロックになった画像の角は親ブロックの角を突きぬけてくれる。

画像を見ているとどうも、

境界線の形状指定であって、画像をどう表示するかとは関係がない

という超斬新な解釈のもとに実装されているような感じだ。
こういう解釈・実装もある、ということを踏まえた上で、border-radiusを使って画像の角を丸くしたい場合は、

ブロック要素の背景に画像を埋め込んでブロック要素の角を丸くする

という方法をとるらしい。

background: url(画像URL) no-repeat center center;
width: 画像の幅
height: 画像の高さ

このブラウザ	Chrome	Opera

こういうやり方をするとスタイルシート記述に画像の情報を埋め込まなきゃならないのがメンドクサイですね。
ついついjavascriptで設定する方向に逃げてしまいそうです。

あ…IEの事をすっかり忘れてた。CSS3に対応したらしいから大丈夫だと思ったのこのブログから見ると全く効いてないですね。開発者ツールでドキュメントモードをIE9に設定してやれば効くようだけど、bloggerがmetaタグを使ってIE7コンパチ表示指示を出力しているみたい…これはこれでIEのための何かを頑張った結果なんだろうな。もうIEについては見なかったことにするか。。