Home arrow Style Sheets arrow Page 2 - Drawing Circular Shapes with CSS3 and Border Radius
STYLE SHEETS

Drawing Circular Shapes with CSS3 and Border Radius


In this first part of a two-part tutorial, I demonstrate how easy it is to drop a few circles on a web page, thanks to the “border-radius” property.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 5
December 21, 2011
TABLE OF CONTENTS:
  1. · Drawing Circular Shapes with CSS3 and Border Radius
  2. · Creating Circles with the CSS Border-Radius Property

print this article
SEARCH DEVARTICLES

Drawing Circular Shapes with CSS3 and Border Radius - Creating Circles with the CSS Border-Radius Property
(Page 2 of 2 )

Even though the concept may sound a bit intimidating at first, the truth is that drawing a circle on a web page using the “border-radius” property is a simple process. It's as easy as creating a container with the same dimensions, and assigning to it rounded corners that are a half of those dimensions.

If my explanation sounds somewhat confusing, just look at the code sample below, which surely will make things much clearer:  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drawing circles with CSS3</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 3.6em;
    font-weight: bold;
}
/* circular shape */
.circle {
     height: 200px;
     width: 200px;
     margin: 0 auto;
     background-color: #FF915B;
     text-indent: -9999px;
     -moz-border-radius: 100px;
     -webkit-border-radius: 100px;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Creating circles with CSS3</h1>
    <div class="circle">This is a sample circle</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    <div class="circle">This is a sample circle</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
</body>
</html>

There you have it. As I said before, the creation of the circular shape was a dead-simple process! If you want to test this example on your own browser (remember that IE ignores the “border-radius” property), you should see output similar to that shown in the following screen shot:

Not too bad, right? Since the circle was rendered without using a single background image, the result is definitely more than acceptable. Of course, it’s possible to create circular shapes that have some text inside, which is certainly more useful than the empty, meaningless figure that you just saw.

Therefore, in the next section I’ll be modifying the previous example. It will display the same couple of circles, but this time they’ll be enhanced with the inclusion of some sample labels.

To learn how this will be done, just keep reading.  

Adding Text Inside Circular Shapes with CSS

If you paid close attention to the previous example, you’ll have realized that modifying the sample circles to display some text within them is only a matter of removing the “text-indent” property from the pertinent styles.

The best way to understand the inner workings of this process is by example. Therefore, have a look at the following, which shows how to accomplish this in a nutshell:    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Drawing circles with CSS3 (with text inside)</title>
<style type="text/css">
body {
    padding: 0;
    margin: 0;
    background: #fff;
    font: 0.8em Arial, Helvetica, sans-serif;
    color: #000;
}
h1 {
    font-size: 3.6em;
    font-weight: bold;
}
/* circle */
.circle {
     height: 200px;
     width: 200px;
     margin: 0 auto;
     background-color: #00AE00;
     font-size: 3.5em;
     color: #fff;
     line-height: 200px;
     text-align: center;
     -moz-border-radius: 100px;
     -webkit-border-radius: 100px;
}
#wrapper {
    width: 600px;
    margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrapper">
    <h1>Creating circles with CSS3 (with text inside)</h1>
    <div class="circle">Sample</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
    <div class="circle">Sample</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere ullamcorper lacus et sollicitudin. Morbi ultrices condimentum lacus, sit amet venenatis purus bibendum sit amet.</p>
</div>
</body>
</html>

Done. Now that the “text-indent” property has been stripped out from the ‘circles’ styles, the text included within them will be visible again. The result of this process can be seen more clearly in the following image. Check it out: 

I don't want to sound like I'm bragging, but at this point I managed to render a couple of basic circles, which at least have some semantic meaning within the structure of the containing (X)HTML document. And best of all, the entire rendering process required only a little massaging of the values assigned to the “border-radius” property.

As with many other CSS3-driven methods, the biggest pitfall of this approach is the lack of support from Internet Explorer. But, with careful planning and the use of some conditional styling strategies, it’s possible to overcome this issue and draw circles that will be rendered consistently across most modern browsers. So, be bold and put the “hidden” functionality of “border-radius” to work for you right now!   

Closing Remarks

In this first part of a two-part tutorial, I demonstrated how easy it is to drop a few circles on a web page, thanks to the functionality provided by the “border-radius” property. As you just saw, the process’s logic was reduced to assigning a rather large value to the property, which was calculated as a function of the width and height given to the circle’s container. In this particular case, I used a plain div as the container, but it could be any other block-level element).

Moreover, if you found it simple to grasp the previous examples, things will become even more interesting in the last installment. I’ll be showing you how to use a similar approach for drawing semicircles, and even a sleek multi-circle web page header, which you’ll be able to tweak at will.

So don’t miss the final part!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
STYLE SHEETS ARTICLES

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2017 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials