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

This text is 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!

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>

  7. Apollo 26 June 2011, 16:57 7

    This will save using images. Is it cross browser compatible as yet ?

  8. Clive Walker 26 June 2011, 20:43 8

    @Apollo: border-radius is supported by all modern browsers including Internet Explorer 9.

  9. mosne 1 December 2011, 12:06 9

    for IE there’s a quite nice solution http://css3pie.com/

    I’d like to make a responsive circle that adapts its width to the container:

    width:100%

    Do you know any css technique to make a fluid circle? (without using javascript)

  10. Clive Walker 1 December 2011, 13:39 10

    @Mosne: I don’t know of a way of making a fluid circle. You can change the width to a % value, for example 100%, and this will allow the shape to resize with the browser window but it will not be a symmetrical circle.

Textile Help
Stop looking at my bottom