How to make a circle with CSS3

Posted in: CSS No Comments

With CSS3 border-radius property, its now possible to make circle. So, now you do not need image to display circle. You can also use this method to make circular backgrounds.

Define height and width of the region, and value for both height and width should be same. Now use border-radius property and its value should be exactly half of height / width.

.circle {
background: #4c4c4c;
height: 100px;
width: 100px;
border-radius: 50px;

This will make a circle of radius 50 px

border-radius CSS3 property is supported by latest version of all major browsers including IE9

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply