CSS circles.css

.circle {
	border-radius: 50%;
	width: 100px;
	height: 100px; 
    line-height:100px;
    text-align:center;
	border:1px solid black;
	/* width and height can be anything, as long as they're equal */
} 


ul {
	margin:30px;
	padding:0;
}

li {
	display:inline-block;	
	padding:10px;
}


<ul>
	<li class="circle"><a href="#">Home</a></li>
 	<li class="circle"><a href="#">About</a></li>
    <li class="circle"><a href="#">Blog</a></li>
    <li class="circle"><a href="#">Testimonials</a></li>
    <li class="circle"><a href="#">Contact</a></li>
</ul>