Let’s start with a simple CSS3 circle using the border radius just to add some colour and Pizazz to the page. We will be making a badge with a green background. It should end up looking like this…(Apart from Internet Explorer)

To begin with we use the HTML markup as follows.

<div class="circle"></div>

Then follow up with the CSS. First make a square 100px wide and high with a green background colour.

.circle {
width: 100px;
height: 100px;
background: green;
}

You should end up with this…

Add

border-radius: 50px;

to your style and you’ll have a perfectly round circle.

Now as border radius is a property that is new to browsers and web standards, we need to add vendor prefixes to the declaration. What is a vendor prefix I hear you ask? Well, for Mozilla Firefox which is a Gecko browser, we need to add -moz- to the border-radius property. So, we end up with -moz-border-radius. We need to do this for Opera and Google/Safari. Google and Safari are webkit browsers, so must have the prefix -webkit- in front and Opera has -o- in front.

How does it look then?

-moz-border-radius: 50px;
-webkit-border-radius: 50px;
-o-border-radius: 50px;
border-radius: 50px;

Finally, as browsers develop and remove these vendor prefixes, we can be prepared for it by just stipulating border-radius: 50px; at the end. Then the only rule to be read will be this one.

Follow my box-shadow link to see how I put a drop shadow on the circle at the top.