ブログに表示される画像の角を、丸くしたいです。

質問

ブログを書いています。ブログで画像を表示するとき、その画像の周りに、浮き上がるような装飾が自動的につくテンプレートを使用しています。そのテンプレートを下に書きます。
------------------------------------------
/* 画像の装飾 */
.mainEntryBase img{
margin:0px 3px 0px 0px;
padding: 3px;
background-color: #FFFFFF;
border-right-width: 1px;
border-bottom-width: 2px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #999999;
border-bottom-color: #999999;
}
------------------------------------------

　このテンプレートを変更して、ブログ上で表示する画像の角が自動的に丸くなるようにしたいと考えています。どのようにすればいいのか教えてください。

　http://ezinfo.jp/contents/script/rcr/
　このサイトでは、画像のURLを入力すると自動で角を丸くしてくれます。このような操作を、ブログのテンプレートに組み込み、表示した画像の角が自動的に丸くしたいと考えています。よろしくお願いします。

回答No.2

LLLuna · ベストアンサー

＞画像を4つ作り、それをアップロードした画像の四隅に表示させる
スタイルシートでの実現は、残念ですが無理だと思います。先ほどふと、DirectXの機能を利用するfilterプロパティ（WinIE限定）なら出来るのではと思いましたが、これを実現できるものはありませんでした。
JavaScript（DOM）を使えば出来るかもしれませんが、様々な問題が考えられることから、この方法では出来たとしても実用には耐えられないと思います。もっと画期的な方法が有れば別ですが、テンプレートとして実現することは出来ないでしょう。

どうしても自動的に行いたいならば、CGIを利用するのが一番実用的だと思います。
画像URIをパラメータとして渡すと、加工済みの画像を返してくる。そういうCGIがあれば、自動的に角を丸くすることが実現できるでしょう。
問題点は、そのCGIをおいたサーバに負荷がかかることですね。

そうでなければ、やはり予め加工した画像を使うほかないと思います。

お礼

回答、ありがとうございます。とても詳しく教えていただけたので、参考になりました。スタイルシートで角を丸くするのは難しい、ということがよくわかりました。
あらかじめ加工した画像をアップロードして使ったほうが手軽で簡単ということですね。これからそのようにしてアップロードしていきたいと思います。
2度の丁寧な回答、本当にありがとうございました。

回答No.1

LLLuna

私が知る限りでは、画像の角を切り取るCSSプロパティはありません。

-moz-border-radius:《サイズ》;

という、枠線の角を丸くするものならありますが（Gecko限定。CSS3に採用予定）。応用が利かないかと試してみましたが、出来ませんでした。

（そちらのサイトで）画像の角を丸く加工し、ブログに掲載する。それしか無いのでは?

補足

回答ありがとうございます。
画像を切り取るのは、難しいことがわかりました。
切り取るのではなく、内側が透明で外側が白色の画像を
四隅に上から表示することで切り取ったようにみせることはできますか？

画像を4つ作り、それをアップロードした画像の四隅に表示させるというテンプレートは作れないでしょうか?