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.

Richard Hamlin

Richard is a creative designer & blogger. He writes for Crayonify about Graphics, Creativity and UX Design. Richard loves to unlock his creativity with writing.