Creating Circles with CSS

Posted On 2014-12-13 by dwirch
Tags: Webmaster Related Tip Tutorial 
Views: 2020

Have you ever needed to make a circle for your web site, with text inside of it? Normally, you'd create a graphically representation, with the text inside. Did you know you could do it with a simple little CSS class?

A circle is sometimes handy to draw attention to something on your page, or to build a button for a user interface. Why use a graphic, though? Make your page more light-weight and faster-loading by using CSS.

It's pretty simple really. This snippet of CSS code will draw a 100 pixel diameter circle, with a red background:

background-color: #ff0000;
height: 100px;
width: 100px;
-webkit-border-radius: 50px;

Breaking it down line-by-line, this code does the following:

  • Set the background color for the class to full red
  • Change the height to 100 pixels
  • Change the width to 100 pixels
  • The last three lines set a border radius to half that of the height and width
  • Set some text attributes

Pretty straightforward, yes?

Some Examples:

100 pixels


150 pixels

70 pixels

About the Author

dwirch has posted a total of 187 articles.

Comments On This Post

No comments on this post yet!

Do you have a thought relating to this post? You can post your comment here. If you have an unrelated question, you can use the Q&A section to ask it.

Or you can drop a note to the administrators if you're not sure where you should post.

Your IP address is:

Before you can post, you need to prove you are human. If you log in, this test goes away.

Recent Forum Posts

Advanced search added
dwirch posted on September 23, 2017 at about 13:44 in Site News

Job Spammer: Gaurav Mehta - AgreeYa Solutions
dwirch posted on September 22, 2017 at about 10:35 in Spammers

Job Spammer: Prutha Siri - Javelin Systems
dwirch posted on September 10, 2017 at about 6:15 in Spammers

New security implemented
dwirch posted on September 7, 2017 at about 7:16 in Site News

Malicious IP Checker Companion Tool
dwirch posted on August 12, 2017 at about 20:24 in Site News

Job Spammer: Steve Adams
dwirch posted on August 8, 2017 at about 7:44 in Spammers