fortypoundhead.com

Creating Circles with CSS

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


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:

.classnamehere
{
background-color: #ff0000;
height: 100px;
width: 100px;
-moz-border-radius:50px;
-webkit-border-radius: 50px;
border-radius:50px;
line-height:100px;
color:#fff;
font-weight:bold;
}

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

50

150 pixels

70 pixels


About the Author

dwirch has posted a total of 173 articles.

You can find more information from dwirch by visiting http://www.derekwirch.com.


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:54.224.30.39

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



Recent Forum Posts

Fold Code Manager into main KB?
VB6Boy posted on July 22, 2017 at about 14:42 in Site News

Fold Code Manager into main KB?
dwirch posted on July 22, 2017 at about 14:41 in Site News

Fold Code Manager into main KB?
dwirch posted on July 21, 2017 at about 22:46 in Site News

Fold Code Manager into main KB?
dwirch posted on July 20, 2017 at about 7:55 in Site News

Job Spammer: Sam Mallon
dwirch posted on July 18, 2017 at about 18:36 in Spammers

When setting up a certificate authority ...
dwirch posted on July 13, 2017 at about 9:07 in General