It's a question we all wanted answered at one time or another. Why? So that we can programmatically create icons of whatever color we want without sitting in Paint for hours changing dot colors. (Edit: Okay, I have done the color block with background-matching gif/png with transparent middle before, but that still feel kludgey. I'm happy enough with this degrading to blocks on older-but-not-ancient browsers.)

How to Create Circles with CSS | Bryan Hadaway's Web Tech Blog:

Making circles with CSS3 is very simple, but not very well supported with older browsers. If your design depends on circles (and you need to accommodate users on older browsers) you should definitely use images instead.

I wanted icons then text, and the below works (spacing's a little weird so it'll fit in the blog design). There's some extra stuff as I tried to figure out why IE9 wasn't playing nicely. Turns out it's the lack of a doctype at the top. Once it's there, it all worked. Not so lucky in Camino (essentially Firefox 3.6).
<!DOCTYPE html>
<html>
        <head>
                <style>
                        .circle{
                                width:12px;
                                height:12px;
                                border-radius:6px;
                                font-size:12px;
                                color:black;
                                line-height:12px;
                                text-align:right
                        }

                        .circle2{
                                width:100px;
                                height:100px;
                                border-radius:50px;
                                font-size:20px;
                                color:#fff;
                                line-height:100px;
                                text-align:center;
                                background:#000
                        }
                        
                </style>
        </head>
        <body>
                <div 
                        class="circle" 
                        style="background:rgb(200,200,200);">
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hello</div>
                
                <div class="circle" style="background:green;">
                        Hello (without spacing out)</div>
                <div class="circle2">Hello </div>
                <div style="width: 100px;
                        height: 100px;
                        text-align: center;
                        color: #fff;
                        line-height: 100px;
                        font-size: 20px;
                        border-top-left-radius: 50px;
                        border-top-right-radius: 50px;
                        border-bottom-right-radius: 50px;
                        border-bottom-left-radius: 50px;
                        background-image: none;
                        background-attachment: scroll;

                        background-repeat: repeat;
                        background-position-x: 0%;
                        background-position-y: 0%;

                        background-size: auto;
                        background-origin: padding-box;
                        background-clip: border-box;

                        background-color: rgb(0, 0, 0); ">Spam</div>
        </body>
</html>


So here that looks like this (the first row is what I wanted)...
     Hello

Hello (without spacing out)



Hello
Spam

Labels: