Quick Code Snippet: Simple CSS3 Circles

Coding a CSS Circle

The code snippet to create the circle looks like this.

[code type=css]
.your-class {
background-color: #000;
height: 100px;
-moz-border-radius:50px;
-webkit-border-radius: 50px;
border-radius:50px;
width: 100px;
}
[/code]

Simply assign a width and height of the same dimensions, then simply set the border radius to half of that of the width and height.

Sadly the code snippet only works in Chrome and Safari. If your using Internet Explorer you will see a square.

Conclusion

Thanks for taking part in this article, if you have any questions feel free to post them up on our Facebook Fan Page Or Tweet them via twitter @photoshop_plus.


Author: Sam ZamanSam loves to write on technology & related stuff. Ecommerce, mobile and internet marketing equally drive her interest. Likes gardening and experimenting with new recipes. An avid reader and absolutely mad @bout donuts :)

4 thoughts on “Quick Code Snippet: Simple CSS3 Circles”

Leave a Comment