The border radius property in CSS 3 is not only useful for making curved corners and borders without images or javascript. It can also be used to do a bit of basic drawing.

In this short tutorial we’ll look at how you can use border-radius to draw a simple circle.

A precautionary note before we begin – Not all browsers supports CSS3 so if yours doesn’t you will probably be stuck with an old fashioned, pointy square rather than a nice, round circle.

We’ll start by creating a div for our circle to live in and give it a class which we will use to refer to it in the css.

That’s all the HTML we need so onto the CSS. Firstly we’ll set the circle classes height, width and background colour so that we can see what we’ve got in the div. (You can either do this within your html file by encompassing the below code in syle tags or in an external CSS file).

.circle {
height:100px;
width:100px;
background-color: #123456;
}

Now you we should have a dark blue square that is 100 x 100 pixels in size.

Now to turn the above square into a circle we’ll define a border radius that is half the size of our square, so that would be 50 pixels. More commonly we may want to just slightly curve the corners so we would set the border radius to 5 pixels for example.

In a perfect world we would do this simple with one line of CSS:

border-radius: 50px;

However, browser compatibility is just one of the issues that makes our world imperfect, so we’ve got to deal with it to make sure as many people as possible will see our circle.

To do this we’ll add

-moz-border-radius: 50px;
-webkit-border-radius: 50px;

The above 2 lines of code help out with firefox, safari and google chrome. So hopefully we’ve got the majority of our bases covered as Internet Explorer 9+ supports the border-radius property.

Our code CSS file should now look like this:

height:100px;
width:100px;
background-color: #123456;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;

And the output (in your browser) is this:

You should now have a solid blue circle. Let’s finish it off by adding a different colour border to it and writing something in the middle.

Firstly to add a border we’ll use the following CSS:

border: 3px solid #069;

This adds a 3 pixel thick lighter blue border that looks like this:

Now we’ll write the word ‘circle’ in the middle of the circle. To do this we’ll add a paragraph with our word into the HTML, like this:

circle

If you have a look at your circle now you will see that the text is not in the middle but in the top left of our shape. A bit more CSS to fix that and we’re done.

.circle p{
color: #fff;
font-family: sans-serif;
font-size:20px;
text-align:center;
margin-top:40px;

}

What we’ve done here is simple make the text white, so we can see it more clearly and made it a sans-serif font and 20px in size and aligned it horizontally in the center. As we know the div is 100px and the text is 20px we can then vertically align it by setting the line-height to be the same size as the div as it is only one line of text.

Our completed css should now look like this:

.circle{
height:100px;
width:100px;
background-color: #123456;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
border: 3px solid #069;
}

.circle p{
color: #fff;
font-family: sans-serif;
font-size:20px;
text-align:center;
line-height:100px;
}

And the output should look like this:

You should have a nice round circle now and very basic introduction to what you can do with the border-radius property. This just scratches the surface of what can be done. In future tutorials we’ll look at a few more challenging and impressive possibilities.

An addition to the precautionary note above – Be aware that not everyone keeps their browsers up to date so if you plan on using this in production make sure you take this into consideration. I tend to use javascript to fall back on in such situations, usually something like curvycorners.

Written be Benjamin Dowty for webgrafter.com