<div id="content">
<h1>CSS circles using border radius</h1>
<div class="circle blue">Blue</div>
<div class="circle green">Green</div>
<div class="circle red">Red</div>
<p class="feedback">Feedback welcomed via Twitter - <a href="http:/twitter.com/tomdurkin">@tomdurkin</a></p>
</div>
body {
font-family: "open sans", sans-serif;
background: #f1f1f1;
}
#content {
margin: 40px auto;
text-align: center;
width: 600px;
}
#content h1 {
text-transform: uppercase;
font-weight: 700;
margin: 0 0 40px 0;
font-size: 25px;
line-height: 30px;
}
.circle {
width: 200px;
height: 200px;
line-height: 200px;
border-radius: 50%; /* the magic */
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
text-align: center;
color: white;
font-size: 16px;
text-transform: uppercase;
font-weight: 700;
margin: 0 auto 40px;
}
.blue {
background-color: #3498db;
}
.green {
background-color: #16a085;
}
.red {
background-color: #e74c3c;
}
.feedback {
font-size: 14px;
color: #b1b1b1;
}
/* Feedback welcomed via Twitter - @tomdurkin
Enjoy! ;)
*/
This Pen doesn't use any external JavaScript resources.