Quick Code Snippet: Simple CSS3 Circles

CSS3 has been a godsend since it’s been introduced, it’s now easier to create shapes without the use of images. In this tutorial I’ll be showing you how to create a simple CSS circle.

In Blog, HTML & CSS

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.


  1. Patrick Groot
    July 19, 2012 at 6:57 PM

    Why not use border-radius:50px;?

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

    Regards,
    Patrick

  2. Wilma Hamlin
    July 19, 2012 at 8:04 PM

    Typo on my side. Sorry

    Updated the snippet.

  3. July 20, 2012 at 5:31 AM

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

  4. Patrick Groot
    July 20, 2012 at 8:37 AM

    No Problem!

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

Give Us Your Feedback

Here on Photoshop Plus we use something called Gravatar, its a little image which will appear next to your name when you comment on a blog. Using a gravatar will help us recognise genuine comments from the spam comments.


Don't forget to leave a comment on this post, we appreciated your feedback good or bad.

There's currently 4 Comments On Quick Code Snippet: Simple CSS3 Circles, why not add yours!

Leave a Reply

Your email address will not be published. Required fields are marked *

Auto Scroll To The Top
css.php