We can use the CSS3 border-radius property to create simple circles with CSS. The following technique is in itself really straightforward and intuitive. Let's see the details.
We have the following markup:
<div id="test"></div>
We can set the radius to the half of the overall box dimensions to create the final effect of a circle:
#test {
width: 100px;
height: 100px;
border-radius: 50px;
background: #000;
box-shadow: 2px 2px 5px #999;
}
You can see the demo below.