Quick Code Snippet: Simple CSS3 Circles

Quick Code Snippet: Simple CSS3 Circles

Coding a CSS Circle

The code snippet to create the circle looks like this.

1
2
3
4
5
6
7
8
.your-class {
    background-color: #000;
    height: 100px;
    -moz-border-radius:50px;
    -webkit-border-radius: 50px;
    border-radius:50px;
    width: 100px;
}

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.


About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

4 comments
Patrick Groot says

Why not use border-radius:50px;?

I’m on firefox and i see a nice squere..

Regards,
Patrick

Reply
Richard Carpenter says

Typo on my side. Sorry

Updated the snippet.

Reply
sanjay says

Good one Richard, you can also add in -khtml- and -o- web prefix for the rounded corner.

Reply
Patrick Groot says

No Problem!

Like you’re site en posts on it. ;)

Reply
Add Your Reply

Popular posts

css.php