Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Making circles with CSS3 border-radius

Posted on by Clive Walker in CSS CSS3

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

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!

Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Comments

  • 25 May 2010 08:56:58

    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.

  • 26 May 2010 04:07:25

    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.

  • 26 May 2010 08:32:09

    @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.

  • 01 Jun 2010 16:55:48

    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).

  • 25 Jun 2010 10:03:18

    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!

  • 28 Jul 2010 05:29:24

    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>

  • 26 Jun 2011 16:57:44

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

  • 26 Jun 2011 20:43:50

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

  • 01 Dec 2011 11:06:45

    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)

  • 01 Dec 2011 12:39:00

    @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.

  • 16 Feb 2012 07:08:41

    Hi,
    Thanks for this tip. But I need to divide this circle into pies. Is it possible using CSS3?

  • 16 Feb 2012 11:23:53

    @Saeed Neamati: You can create other shapes with CSS3 and logos like the Opera logo with CSS have been created that way. With some experimentation, you can probably do it!

  • 15 Nov 2012 06:54:05

    I actually posted (now down) a blog on this several years ago when HTML5 was first starting to be really PUSHED when Firefox was one of the few supporting border-radius. My my HTML5 has come far.

  • 04 May 2014 21:32:47

    Great round up. Interesting that a couple of years on CSS3 circles are widely used but still lacking with users using older versions of IE

Comments are OFF for this post.

© 2024 Clive Walker