How to Create Circles with CSS

Last Updated: April 6th, 2018

Making circles with CSS is very simple. Just make the radius half of the width and height of the element to make a perfect circle, or simply use:

border-radius:50%

Responsive Circle With or Without Text Inside

Narrow your browser window horizontally to test the circle’s responsiveness.

CSS

.circle{width:50%;height:0;font-size:20px;color:#fff;text-align:center;line-height:0;padding:25% 0;border-radius:50%;background:#09f}

HTML

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

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>

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>

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>

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>

Outset/Inset Button Circle

Hello

CSS

.inset{display:block;width:100px;height:100px;border-radius:50px;font-size:20px;font-weight:bold;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

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

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.