Bryan Hadaway's Blog
Your Account:   subscribe

bhadaway@gmail.com | Social: Facebook Twitter LinkedIn Google+

How to Create Circles with CSS


UPDATE – For future-proofing and responsive design, you can 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>

NEW: 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.

Thanks for reading, Bryan

  • http://bryanhadaway.com/ Bryan Hadaway

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

  • http://jonathandejong.nl/ Jonathan de Jong

    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.

  • http://wordpresswithzaheer.blogspot.com Zaheer Abbas

    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!