How to Make Circles in CSS

As a fan of the cool Scriptaculous home page, I was wondering how we could achieve a similar look using pure CSS. It turns out that it’s child’s play.

NB: to use this effect, you’ll need to be using a browser that’s implemented CSS3’s border-radius. This means Safari & Firefox: other browsers will simply get a square. Because they’re square, man!

For the example, we’re going to have simply a DIV with a paragraph in it.

CSS Circle Effect Definitions

  div {
    width: 10em; height: 10em;
    -webkit-border-radius: 5em; -moz-border-radius: 5em;
  }
  p {
    text-align: center; margin-top: 4.5em;
  }

The Explanation

You have to define your parent objec’s height & width & they must be the same (here, 10em). You then employ -webkit-border-radius (or, for Firefox, -moz-border-radius) & define it as half the amount of the height & width. There’s your circle. To get your paragraph looking awesome, align the text centrally.

I’ve placed a HTML/CSS sample here for viewing. Note that I added a border colour to verify that the DIV operates as a proper circle.

For the sample, I defined the P tag explicitly as 1em in height. A small paragraph would be square in the middle of the DIV, which means it would straddle the centre, hence a definition of 4.5em—5em being the centre of our example, 1 em being the height of our P, so we have to nudge the paragraph up by half its height, or 0.5em.

If you wanted to employ this for a real project, you’d have to consider what would happen to the enclosing content of your DIV, however. You’d almost certainly have to define your paragraph to be smaller in height & width than the parent DIV, otherwise your paragraph would bleed over the edges of your circle.

Anyway, some food for thought. Now go & make circles, my pretties!