How to Create Circles with CSS

UPDATE — For future-proofing and responsive design, you can now simply use:

border-radius:50%

Making circles with CSS3 is very simple, but not very well supported with older browsers. If your design depends on circles (and you need to accommodate users on older browsers), you should definitely use images instead.

However, if your audience is more tech-savvy (meaning they’ll likely be using the latest browsers 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: August 13th, 2012

Plain Circle With or Without Text Inside

Hello

CSS

.circle{width:100px;height:100px;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{display:block;width:100px;height:100px;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{display:block;width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;text-decoration:none;background:#000}.menu:hover{color:#ccc;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{display:block;width:100px;height:100px;border-radius:66px;border:4px double #ccc;font-size:20px;color:#666;line-height:100px;text-align:center;text-decoration:none;text-shadow:0 1px 0 #fff;background:#ddd}.stylish:hover{border:4px double #bbb;color:#aaa;text-decoration:none;background:#e6e6e6}

HTML

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

The Formula

Just make the radius half of the width and height to make a perfect circle. It’s that simple.

Outset/Inset Button Circle

Hello

CSS

.inset{display:block;width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-shadow:0 1px 0 #666;text-align:center;text-decoration:none;box-shadow:1px 1px 2px #000;background:#cccbbb;opacity:0.95}.inset:hover{color:#eee;text-shadow:0 0 1px #666;text-decoration:none;box-shadow:0 0 4px #222 inset;opacity:1}

HTML

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

Multicolored Circle

CSS

#circle-container{width:100px;height:100px}.quarter{width:50px;height:50px}.top-left{border-top-left-radius:50px;background:#09f;float:left}.top-right{border-top-right-radius:50px;background:#666;float:right}.bottom-left{border-bottom-left-radius:50px;background:#aaa;float:left}.bottom-right{border-bottom-right-radius:50px;background:#333;float:right}

HTML

<div id="circle-container"><div class="quarter top-left"></div><div class="quarter top-right"></div><div class="quarter bottom-left"></div><div class="quarter bottom-right"></div></div>

Gradient Circle

Now that the standard for CSS gradients is here, there’s no stopping us!

CSS

.grad{width:100px;height:100px;border-radius:50px;background:linear-gradient(to bottom, #40b3ff, #09f)}

HTML

<div class="grad"></div>

Change Text Upon Hover

JavaScript, eat your heart out.

HelloBye :(

CSS

.change .two{display:none}.change:hover .one{display:none}.change:hover .two{display:inline}

HTML

<a href="#" class="change"><span class="one">Hello</span><span class="two">Bye :(</span></a>

Call-to-Action with Adjacent Info

Call Us!123.456.7890

CSS

.circle{width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#000}.info{position:absolute;color:#777;margin-left:20px}

HTML

<div class="circle">Call Us!<span class="info">123.456.7890</span></div>

If you need any help don’t hesitate to ask in the comments below.

  • Are we referring to any version of IE, or out-dated versions?

  • Thanks! The line-height saved my ass :)

  • Pyrrha

    Nice job, thanks a lot !
    Just, there is a mistake, I don’t know if that’s the same for you.
    If you put this code, a semi-square-circle can be display, but you can modify the border radius by 50% instead of 50px.

  • How to create this type of circles within while loop php ????

  • Mike

    This is a beautiful piece of work. It’s exactly what I’ve been looking for and more. Thank-you so much!

  • Great!

  • Patrick Meppe

    Nice job. Thanks.

  • Victoria

    I absolutely love this post. It is everything that I have ever wanted!! But it isn’t working.. I am running it on a Mac OS Yosemite Version 10.10.5. I have the most updated version of Google Chrome, and I tried it on Firefox and Safari. I am typing up the code on Sublime Text 2, and the rest of my webpage works perfectly fine.

  • Please share the link and I’ll have a look.

    And if you can’t share the link, please share the code you’re using.

    Thanks

  • Victoria

    I forgot to import the css class! Everything is working perfectly now. Thank you so very much for this very helpful website!

  • You’re welcome. It’s on my list to write some more how-to articles. One of these days, my lazy bones will get around to it. :)

  • chromahoen

    Thanks. Very helpful.