Dotted CSS Circle

The W3C Mobile Web Course I co-run with Frances de Waal continues to throw up good ideas, this time from Irish Web designer Sandra Davis of Lunamatic (@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. Also the WebKit browsers show the dots as squares whereas others show them as circles or curved rectangles, again, no big deal. It works one way or another for everyone but looks best on the more modern/capable browsers - that's Progressive Enhancement for you!