Content Within Dotted CSS Circles

The W3C Mobile Web Course [broken link removed] I co-run with Frances de Waal continues to throw up good ideas, this time from Irish Web designer Sandra Davis of Lunamatic

This strikes me as a really cool use of CSS. Dunno when I'll get to use it but it's clever.

When I first saw it I thought it was probably SVG (Sandra designs vector graphics so I wasn't far wrong) but no, this is pure CSS. Here's the code:

.circle { 
    border: 1em dotted #235EA4;
    padding: 2em; 
    height: 7em; 
    width: 7em; 
    border-radius: 7em; 
    text-align: center; 
    margin: 2em auto 0; }
  

The CSS degrades gracefully - if the browser doesn't support rounded corners (and all modern browsers do) then you see a square - no big deal.