Circles in CSS

Posted by on Feb 8, 2013 in Web development | No Comments

I recently found that I wanted to have nicely rendered circular backgrounds for a site I was working on and, while there are a few options here:

Include them in the images, include them as an image on a background, draw them in jscript…

I decided to look at a nice, simple, CSS route to see if I could get consistent results; and so far the following has worked for me (so long as you ignore naff old versions of IE, of course…)

<style>
.circle {
     width: 100px;
     height: 100px;
     border-radius: 50%;
     background-color: #f00;
}
</style>
<div class="circle">
     <!-- content here -->
</div>