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!