Coding a full circle

Below are the styles for creating a full circle. Underneath the code you’ll see the circle that these styles will output. To create the circle simply assign the same height and width value to your class. Set the border-radius to half of the height and width value.

.full-circle {
 background-color: #c06;
 height: 150px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 width: 150px;
}

Coding a full circle with a stroke

Now that we have coded our circle, we can apply some different types of fills. If you’d like to add a stroke to your circle, it’s as easy as adding a border selector to our CSS. I’d recommend keeping your border width no bigger than 3px. The rendering of the stroke looks odd any thicker to that due to how the browser renders it.

.full-circle {
 background-color: #c06;
 border: 3px solid #333;
 height: 150px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 width: 150px;
}

Using opacity to make your circle fill transparent

If you’d like to subtract out your fill and only display the stroke, you can so by using some CSS3 transparency. Using the background-color selector, we can set a value using the RGB color mode. The first three numbers refer to R G B, and the final number is how you control the opacity. Setting it to 0 will make the fill transparent, 1 will set it to 100%, 0.5 will set it to 50%, etc…

.full-circle {
 background-color: rgba(204, 0, 102, 0);
 border: 3px solid #333;
 height: 150px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
 width: 150px;
}

Coding half of a circle

Remember this only works in Firefox. Coding a half circle is just as easy as the full one. We just need to tweak the border-radius selector to only show half the circle. You’re also going to need to divide the width in half since we are only showing half the circle.

.half-circle {
 background-color: #c06;
 height: 150px;
 -moz-border-radius: 150px 0 0 150px;
 width: 75px;
}

Coding the quarter of a circle

Once again, this only works in Firefox. Change you width back to 150px. Set the top-left border-radius value to 150px and everything else to 0.

.quarter-circle {
 background-color: #c06;
 height: 150px;
 -moz-border-radius: 150px 0 0 0;
 width: 150px;
}