Creating Circles with CSS

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

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 172 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

Job Spammer: Sathya Narayana
dwirch posted on March 15, 2017 at about 7:18 in Spammers

Job Spammer: Manish Kumar
dwirch posted on March 14, 2017 at about 17:44 in Spammers

Site Migration Complete
dwirch posted on March 12, 2017 at about 11:10 in Site News

Site Migration Complete
dwirch posted on March 11, 2017 at about 0:35 in Site News

Job Spammer: Jason Weinstein
dwirch posted on March 10, 2017 at about 14:00 in Spammers

Job Spammer: Ryan Wilson
dwirch posted on March 8, 2017 at about 17:00 in Spammers