Creating Circles with CSS
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 this post
Posted: 2014-12-13
By: dwirch
Viewed: 2,426 times
Categories
Tip
Tutorials
Webmaster Related
Attachments
Loading Comments ...
Comments
No comments have been added for this post.
Sorry. Comments are frozen for this article. If you have a question or comment that relates to this article, please post it in the appropriate forum.