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:
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?
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.