Making circles with CSS3 border-radius

Posted in on 24 May 2010

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 should be 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:

This text should be in a circle.

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!

More: Think Vitamin Membership gives you a whole range of CSS3 video tutorials.

Related Posts

Comments

  1. Stephen 25 May 2010, 08:56 1

    It’s interesting to see CSS3 in action like this, as I don’t think I’ve seen the border radius property used to make a complete circle before. This can have obvious uses such as stickers and badges on sites, and reducing load times compared to having an image.

    CSS3 seems great overall, however the fact that none of the released versions of Internet Explorer support it mean that usage still needs to be limited. IE9 will be a big jump forward for the IE range, but until this is released these CSS3 properties require a backup.

    I look forward to more tutorials on CSS3 in the near future, as it is a big step forward and will become increasingly used in the near future.

  2. Zoe Gillenwater 26 May 2010, 04:07 2

    I’m glad you liked the circle, Clive. Isn’t it cool how easy it is?

    This degrades to a square in IE, which I think it perfectly acceptable in this case. Those users will never suspect anything is lacking.

  3. Clive Walker 26 May 2010, 08:32 3

    @Zoe: Have to agree that the new capabilities of CSS3 are fantastic at making what used to be complicated (all those rounded corner methods!) now very simple.

  4. Steve Maggs 1 June 2010, 16:55 4

    This is definitely one of the most eagerly anticipated additions in CSS3. Nice post, simple and to the point.

    It is a shame that it’s not completely cross browser (or valid) but my gut feeling says that Microsoft are going to do their best to ensure IE9 finally kills off IE6 (and quite possibly IE7 and IE8).

  5. Rory 25 June 2010, 10:03 5

    Nice post. I was looking for the code to do circle…and here it is! Been learning CSS3 for over a week now and I’m lovin’ it. Web designers dream!

  6. Linni 28 July 2010, 05:29 6

    Using your circle example I experimented and came up with this:how cool is this!!

    <style type/text css>
    div.example1 { background: #69F; width: 1em; height: 1em; -moz-border-radius: 5em; -webkit-border-radius: 5em; border-radius: 5em;
    }
    .example1 p { padding: 2em 2em 0 2em;
    }
    </style>

    <div class=“example1”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text</div><br>
    <div class=“example1”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text</div><br>
    <div class=“example1”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text</div><br>
    <div class=“example1”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text</div><br>
    <div class=“example1”>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Text</div><br>

Textile Help
Stop looking at my bottom