All posts tagged border-radius

How To Create Circles With CSS3 and No Images

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;
}

Continue Reading