<p>Number 1 is the original border-radius</p>
<p>Number 5 looks best to me but requires an additional inner div</p>
<div class="test">1</div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"><div>4</div></div>
<div class="test5"><div>5</div></div>

<!-- svg example -->
<div class="test6 svg">
    <svg width="100%" height="100%" >
      <circle cx="50%" cy="50%" r="74" fill="red" 
         stroke="#000" stroke-width="1"/>
      <text x="50%" y="50%" font-size="16" text-anchor="middle" fill="white">SVG</text>
    </svg>
 </div>

.test {
	border-radius: 50%;
	border: 1px solid black;
	float:left;
	margin:2px;
	height: 150px;
	width: 150px;
	background:red;
	text-align:center;/* for testing only */
	line-height:150px;/* for testing only */
}
.test2 {
	border-radius: 50%;
	border: 1px solid black;
	float:left;
	margin:2px;
}
.test2:after {
	content:"2";
	display:block;
	height: 150px;
	width: 150px;
	background:red;
	border-radius: 50%;
	text-align:center;/* for testing only */
	line-height:150px;/* for testing only */
}
.test3 {
	border-radius: 50%;
	background:#000;
	float:left;
	margin:2px;
	padding:1px;
}
.test3:after {
	content:"3";
	display:block;
	height: 150px;
	width: 150px;
	background:red;
	border-radius: 50%;
	text-align:center;/* for testing only */
	line-height:150px;/* for testing only */
}

.test4 {
	border-radius: 50%;
	background:#000;
	float:left;
	margin:2px;
	padding:1px;
}
.test4 div {
	display:block;
	height: 150px;
	width: 150px;
	background:red;
	border-radius: 50%;
	text-align:center;/* for testing only */
	line-height:150px;/* for testing only */
}


.test5 {
	border-radius: 50%;
	border:1px solid #000;
	float:left;
	margin:2px;
}
.test5 div {
	display:block;
	height: 148px;
	width: 148px;
	background:red;
	border-radius: 50%;
	text-align:center;/* for testing only */
	line-height:148px;/* for testing only */
}

/* test 6 svg */
.svg{
  width:150px; 
  height:150px; 
  text-align:center;
  float:left;
  margin:2px;
}