Matt Lambert

Would you like to be a better designer & developer?
Sign up for my newsletter or check out my blog to start learning today.

How To Create Circles With CSS3 and No Images

By admin on January 20th, 2015 in CSS3

Thanks to CSS3 it’s now possible to create circles with only code. Look ma, no images! In the following post, I’ll show you how to create full, half and quarter circles using only CSS. The trick to creating the circles, is the use of the border-radius selector.

Live Demo

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;
 width: 150px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
}

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;
 width: 150px;
 -moz-border-radius:75px;
 -webkit-border-radius: 75px;
}

Coding half of a circle

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;
 width: 75px;
 -moz-border-radius: 150px 0 0 150px;
 border-radius: 150px 0 0 150px;
}

Coding the quarter of a circle

Change your 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;
 width: 150px;
 -moz-border-radius: 150px 0 0 0;
 border-radius: 150px 0 0 0;
}

If you’re interested in learning more about CSS3, check out my eBook the CSS3 Handbook