Creating Circles with CSS

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

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 188 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.

Code Links