[CSS] border-radiusを使ってできること

角丸を表現するために使用されるborder-radiusの使いみちを色々考えてみる。
対応ブラウザはie9〜,ff4〜,chrome3〜,safari4〜。

元となる画像

一般的な角丸

border-radius:10px;
-moz-border-radius:10px; /* Firefox用 */
-webkit-border-radius:10px; /* Safari,Chrome用 */

円形

border-radius:50%;
-moz-border-radius:50%; /* Firefox用 */
-webkit-border-radius:50%; /* Safari,Chrome用 */

葉っぱの形　50% 0 / 50% 0 と省略可

 border-radius:50% 0 50% 0 / 50% 0 50% 0;
 -moz-border-radius:50% 0 50% 0 / 50% 0 50% 0; /* Firefox用 */
 -webkit-border-radius:50% 0 50% 0 / 50% 0 50% 0; /* Safari,Chrome用 */

最後は長方形の画像に

border-radius:50% / 50%;
-moz-border-radius:50% / 50%; /* Firefox用 */
-webkit-border-radius:50% / 50%; /* Safari,Google Chrome用 */

デザインへのアプローチが技術からでも、アイデア次第でいろいろできます。
追記：IE9で確認したところ、border-radiusが効いていなかった。
調べてみると以下のソースコードを読み込ませる必要があるとのこと。

参考サイト

• IE9 + border-radius(CSS3) の落とし穴？ - 「だが断る」