{"id":533,"date":"2010-05-25T20:18:44","date_gmt":"2010-05-26T03:18:44","guid":{"rendered":"http:\/\/www.bryanhadaway.com\/?p=533"},"modified":"2025-05-22T15:31:46","modified_gmt":"2025-05-22T22:31:46","slug":"how-to-create-circles-with-css","status":"publish","type":"post","link":"https:\/\/webguy.io\/blog\/how-to-create-circles-with-css\/","title":{"rendered":"How to Create Circles with CSS"},"content":{"rendered":"

\"Circles\"<\/a><\/p>\n

Last Updated:<\/strong> April 6th, 2018<\/em><\/p>\n

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:<\/p>\n

border-radius:50%<\/code><\/pre>\n
Responsive Circle With or Without Text Inside<\/h2>\n
Narrow your browser window horizontally to test the circle’s responsiveness.<\/em><\/p>\n
Hello<\/div>\n
CSS<\/h3>\n
.circle{width:50%;height:0;font-size:20px;color:#fff;text-align:center;line-height:0;padding:25% 0;border-radius:50%;background:#09f}<\/code><\/pre>\n
HTML<\/h3>\n
<div class="circle">Hello<\/div><\/code><\/pre>\n
Plain Circle With or Without Text Inside<\/h2>\n
Hello<\/div>\n
CSS<\/h3>\n
.circle{width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#000}<\/code><\/pre>\n
HTML<\/h3>\n
<div class="circle">Hello<\/div><\/code><\/pre>\n
Clickable Link Circle Button<\/h2>\n
Hello<\/a><\/p>\n
CSS<\/h3>\n
.button{display:block;width:100px;height:100px;border-radius:50px;font-size:20px;color:#fff;line-height:100px;text-align:center;background:#000}<\/code><\/pre>\n
HTML<\/h3>\n
<a href="#" class="button">Hello<\/a><\/code><\/pre>\n
Menu Hover Effect Circle Button<\/h2>\n
Hello<\/a><\/p>\n
CSS<\/h3>\n
.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}<\/code><\/pre>\n
HTML<\/h3>\n
<a href="#" class="menu">Hello<\/a><\/code><\/pre>\n
Stylish Menu Hover Effect Circle Button<\/h2>\n
Hello<\/a><\/p>\n
CSS<\/h3>\n
.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}<\/code><\/pre>\n
HTML<\/h3>\n
<a href="#" class="stylish">Hello<\/a><\/code><\/pre>\n
Outset\/Inset Button Circle<\/h2>\n
Hello<\/a><\/p>\n
CSS<\/h3>\n
.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}<\/code><\/pre>\n
HTML<\/h3>\n
<a href="#" class="inset">Hello<\/a><\/code><\/pre>\n
Multicolored Circle<\/h2>\n
\n
<\/div>\n
<\/div>\n
<\/div>\n
<\/div>\n<\/div>\n
CSS<\/h3>\n
#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}<\/code><\/pre>\n
HTML<\/h3>\n
<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><\/code><\/pre>\n
Gradient Circle<\/h2>\n
<\/div>\n
CSS<\/h3>\n
.grad{width:100px;height:100px;border-radius:50px;background:linear-gradient(to bottom, #40b3ff, #09f)}<\/code><\/pre>\n
HTML<\/h3>\n
<div class="grad"><\/div><\/code><\/pre>\n
Change Text Upon Hover<\/h2>\n
Hello<\/span>Bye :(<\/span><\/a><\/p>\n
CSS<\/h3>\n
.change .two{display:none}.change:hover .one{display:none}.change:hover .two{display:inline}<\/code><\/pre>\n
HTML<\/h3>\n
<a href="#" class="change"><span class="one">Hello<\/span><span class="two">Bye :(<\/span><\/a><\/code><\/pre>\n
Call-to-Action with Adjacent Info<\/h2>\n
Call Us!123.456.7890<\/span><\/div>\n
CSS<\/h3>\n
.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}<\/code><\/pre>\n
HTML<\/h3>\n
<div class="circle">Call Us!<span class="info">123.456.7890<\/span><\/div><\/code><\/pre>\n
If you need any help, don’t hesitate to ask in the comments below.<\/em><\/p>\n