Making circles with CSS3 border-radius

I was browsing a few websites the other day when I came across Stunning CSS3 which promotes a forthcoming book by Zoe Mickley Gillenwater. There are lots of CSS3 properties used on the site but one that caught my eye was the circular ‘Fall 2010’ item near the top of the page. Here, the border-radius property is used to create the circular shape. I have only used border-radius with small radii values before now but larger values allow you to make a circle.

Here’s a short code snippet to achieve this effect. It’s not exactly the same as the above because there’s more CSS used in the Stunning CSS3 site but this is the basics.

This HTML

<div class="example1">
  <p>This text is in a circle.</p>
</div>

… with this CSS

div.example1 {
	background: #69F;
	width: 10em;
	height: 10em;
	-moz-border-radius: 5em;
	-webkit-border-radius: 5em;
	border-radius: 5em;
} 
.example1 p {
       padding: 2em 2em 0 2em;
}

… will give a nice circle like this:

To achieve this effect, the main thing is to make the border-radius values half the amount of the <div> width and height values. I have used ems as the unit for the values because this gives more flexibility with different user text size preferences. I have used a <p> tag (with padding) inside my <div> but other elements may be more appropriate in other circumstances. For example, Stunning CSS3 uses an <em> tag.

You could do a lot more with this but I thought the basic method was worth this short post.

Note: These examples will only be circular if you are viewing the site in a browser that supports the CSS3 border-radius property. The most recent versions of Firefox, Safari, Opera and Chrome should be OK. Internet Explorer 9 which may be released later this year will also support border-radius. Tough luck if you are using IE8 or lower!