Creating Circles with CSS

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

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.

Beat With A Stick List Returns: By request, BWASL has returned to the site. Free your rage by telling the world about something that really grinds your gears. Add your beating.

Recent Forum Posts

BWASL returns
dwirch posted on May 13, 2017 at about 15:24 in Site News

BWASL returns
dwirch posted on May 13, 2017 at about 8:46 in Site News

Job Spammer: Balashankar Bose Bose
dwirch posted on May 11, 2017 at about 10:05 in Spammers

Job Spammer: Bharti Jigyasi
dwirch posted on May 11, 2017 at about 7:58 in Spammers

List of Shady Characters
dwirch posted on April 25, 2017 at about 16:39 in Webmaster Stuff

Job Spammer: Bilal Uddin
dwirch posted on April 25, 2017 at about 11:00 in Spammers