[解決済み] 画像を使用するよりも簡単に円形のdivを作成する方法？

質問

今やっている方法よりも簡単に円形のdivを作成する方法はないでしょうか。

現在は、サイズごとに画像を作っているだけなのですが、これをやるのがめんどくさいです。

CSSを使って、半径を指定できる円形のdivを作ることはできないでしょうか？

どのように解決するのですか？

以下はデモです。 http://jsfiddle.net/thirtydot/JJytE/1170/

CSSです。

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */
}

.type1 {
    width: 100px;
    height: 100px;
    background: yellow;
    border: 3px solid red;
}
.type2 {
    width: 50px;
    height: 50px;
    background: #ccc;
    border: 3px solid #000;
}
.type3 {
    width: 500px;
    height: 500px;
    background: aqua;
    border: 30px solid blue;
}

HTMLです。

<div class="circleBase type1"></div>

<div class="circleBase type2"></div><div class="circleBase type2"></div>

<div class="circleBase type3"></div>

で動作させるためには IE8以前 をダウンロードし、使用する必要があります。 CSS3 PIE . 上のデモはIE8では動作しませんが、これはjsFiddleが以下の機能をホストしていないためです。 PIE.htc .

私のデモはこのような感じです。