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

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

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.