Bryan Hadaway's Blog
seattle web design | + share

Use Firefox: Firefox

Your Account:   subscribe

bhadaway@gmail.com | Social: Facebook Twitter LinkedIn Google+
Signup for the Best Hosting Around

How to Create Circles with CSS

By Bryan Hadaway | Published May 25, 2010 | Need me to update this article?
want to hire me
or
partner with me?

Making circles with CSS3 is very simple, but not very well supported with older browsers. If your design depends on circles you should definitely use background images instead.

However, if your audience is tech savvy (meaning they’ll likely have the very latest technology to view your site) or you feel it’s otherwise safe to start using CSS3 on your site the following styles will work in the latest versions of Firefox, Chrome, Safari, and even IE:

Code Last Refreshed: October 31st, 2011

Plain Circle With or Without Text Inside

Hello

CSS

.circle{
width:100px;
height:100px;
display:block;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
-khtml-border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
text-align:center;
background:#000}

HTML

<div class="circle">Hello</div>

going a step further…

Clickable Link Circle Button

Hello

CSS

.button{
width:100px;
height:100px;
display:block;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
-khtml-border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
text-align:center;
background:#000}

HTML

<a href="#" class="button">Hello</a>

going even a step further…

Menu Hover Effect Circle Button

Hello

CSS

.menu{
width:100px;
height:100px;
display:block;
border-radius:50px;
-moz-border-radius:50px;
-webkit-border-radius:50px;
-khtml-border-radius:50px;
font-size:20px;
color:#fff;
line-height:100px;
text-decoration:none;
text-align:center;
background:#000}

.menu:hover{
color:#fff;
text-decoration:none;
background:#333}

HTML

<a href="#" class="menu">Hello</a>

and getting really stylish…

Stylish Menu Hover Effect Circle Button

Hello

CSS

.stylish{
width:100px;
height:100px;
display:block;
border-radius:66px;
-moz-border-radius:66px;
-webkit-border-radius:66px;
-khtml-border-radius:66px;
border:#ccc 4px double;
font-size:20px;
color:#888;
line-height:100px;
text-shadow:0 1px 0 #fff;
text-decoration:none;
text-align:center;
background:#ddd}

.stylish:hover{
border:#bbb 4px double;
color:#aaa;
text-decoration:none;
background:#e6e6e6}

HTML

<a href="#" class="stylish">Hello</a>

So, just make the radius half of the width and height to make a perfect circle.
If you need any help don’t hesitate to ask in the comments below.

Thanks for reading, Bryan

Other Reads:

tagged in , , , , , ,
Want to share your website, writing, product or service with all my readers too?  
  • http://www.betteryourblog.com Alyna, Better Your Blog

    Hi Bryan,

    Great to see you adding to your blog. Just an FYI, if you try to access this from your FB link it comes up as 404, Error Not Found.

    Anyway, we have one designer over at my newest blog – but there is room for more! You should come over and introduce your blog on the forum, perhaps you will gain a few readers or customers. I don’t know if you ever participate in the ProBlogger.com forums (his blog is .net and his forums are .com) but there are a lot of tech people and bloggers over there too who might love this kind stuff as well.

    Don’t be dismayed by the design when you visit! The new theme is not complete yet and we are just running of the template it came with for the moment because people were too excited to get to the forum. We just started this month so it is currently an intimate group (maybe 20 or so people…several still lurking!) but growing!

    Kind regards,
    ~ Alyna
    Better Your Blog and The Gift Detective

  • http://www.bryanhadaway.com/ Bryan Hadaway

    @BetterYourBlog

    Yeah, that was just me slipping up and showing my error filled human side, I hit publish when I meant to hit save, and I quickly put it back into draft because I was far from done refining the post. Thank you very much for the heads up though, I’ll check out the links to suggested.

    Thanks, Bryan

  • http://www.betteryourblog.com Alyna, Better Your Blog

    :-) I’ve done that before! When I have, I always feel pretty certain that no one could possibly have tried to visit that page in the millisecond that I made the error but…guess I just proved that wrong!

  • http://ohdaus.blogspot.com/ Admin

    this is what i looking for, thanks again bryan

  • http://www.bryanhadaway.com/ Bryan Hadaway

    You’re welcome.

    Thanks, Bryan

  • Praveen Kumar Bolisetty

    This is working fine in FF and Chrome…. But not working in IE

  • http://bryanhadaway.com/ Bryan Hadaway

    Yes, IE is notoriously a horrible browser that is slow to support what other browsers have supported for years.

    Unfortunately we can’t get people to stop using IE, so you’ll have to use background images of circles for your project.

    Thanks, Bryan

  • sonal panchal

    Hi..
    Finally i found that how to make circle button by css.
    Thanks a lot !!

  • sonal panchal

    Hi..
    Finally i found that how to make circle button by css.
    Thanks a lot !!

  • http://bryanhadaway.com/ Bryan Hadaway

    You’re welcome.

    You’re welcome to ask me any other questions you might have in the future over at:

    http://bryanhadaway.com/forum/web-tech-answers/

    Could even spark a new blog article.

    Thanks, Bryan

  • Myproblem

    HI Bryan unfortunately I don’t know how to use background images of circles for my work ,thanks to tell me please send your suggestions to my email add：myproblem@yahoo.cn and thanks again.

  • http://bryanhadaway.com/ Bryan Hadaway

    First, you would need to actually create the graphics (let’s say 100 x 100 pixel circles). If you don’t have Photoshop a free alternative is GIMP:

    http://www.gimp.org/

    Now, you would need to upload them via FTP. I recommend FileZilla:

    http://filezilla-project.org/

    Then you would have maybe a menu in HTML like so:

    &lt;ul id=&quot;menu&quot;&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Kittens&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&quot;#&quot;&gt;Puppies&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

    And CSS to style it like so:

    #menu li a{display:block;width:100px;height:100px;line-height:100px;background:url(images/circle.png) no-repeat}

    Of course that’s an oversimplified quick and dirty answer. If you’re looking for advanced professional help you might consider hiring me:

    http://calmestghost.com/

    Thanks, Bryan

  • Malleshtirugudu

    Hi Praveen, here is one solution, u can use this example:
    http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Feedback
x close