CSS で円形 Div を簡単に作成するにはどうすればよいですか?

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc); /* for IE8 support */
}

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

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

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

.circleBase {
    border-radius: 50%;
    behavior: url(PIE.htc);
}

.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;
}

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

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

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