J'ai récemment écrit une méthode pour faire un cercle en javascript et CSS:

/**
 * Draw a circle in the given color and Element
 * @param radius radius of the circle
 * @param color color of the circle 
 * @param id id of the Element where the circle will be drawed 
 **/
function drawCircle(radius, color, id){
    var circle = document.getElementById(id);
    if (!circle) return;
    circle.style.width  = (2 * radius) + 'px';
    circle.style.height = (2 * radius) + 'px';
    var index = 0;
    for (index = 0; index < (2 * radius); index ++){
        var line = document.createElement('p');
        line.appendChild(document.createTextNode(' ')); 
        line.style.border = 'none';
        line.style.borderSpacing = '0px';
        line.style.padding = '0px';
        line.style.height = '1px';
        line.style.fontSize = '0px';
        line.style.backgroundColor = color;
        var r = Math.abs(radius - index);
        var width = 2 * Math.round(Math.sqrt(radius * radius - r * r));
        line.style.margin = '0px ' +  (radius - width / 2) +
                            'px 0px ' + (radius - width / 2) + 'px';
        line.style.width = width + 'px';
        circle.appendChild(line);
    }
}

Comme un exemple vaut toujours mieux que mille explications. En voici un:

<div id = "circle"></div>
<script>
      drawCircle(100,  'magenta', 'circle');
</script>

Ce qui donne:

L'utilité de la chose est limitée j'en conviens.

Mise à jour: J'ai reçu des milliers de plaintes me disant que ceci n'est pas un cercle mais un disque. Force m'est de constater que vous avez raison. Voici donc une méthode avec l'exemple qui va bien pour créer un cercle (cette fois).

/**
 * Draw a circle in the given color and Element
 * @param radius radius of the circle
 * @param color color of the circle 
 * @param id id of the Element where the circle will be drawed 
 **/
function drawCircle(radius, color, id){
    var circle = document.getElementById(id);
    if (!circle) return;
    circle.style.width  = (2 * radius) + 'px';
    circle.style.height = (2 * radius) + 'px';
    var index = 0;
    for (index = 0; index < (2 * radius); index ++){
        var line = document.createElement('p');
        line.appendChild(document.createTextNode(' '));
        line.style.borderLeft = 'solid 1px '+color;
        line.style.borderRight = 'solid 1px '+color;
        line.style.borderTop = 'none';
        line.style.borderBottom = 'none';
        line.style.borderSpacing = '0px';
        line.style.padding = '0px';
        line.style.height = '1px';
        line.style.fontSize = '0px';
        var r = Math.abs(radius - index);
        var width = 2 * Math.round(Math.sqrt(radius * radius - r * r));
        line.style.margin = '0px ' +  (radius - width / 2) +
                            'px 0px ' + (radius - width / 2) + 'px';
        line.style.width = width + 'px';
        circle.appendChild(line);
    }
}

Voici l'exemple:

<div id = "circle2"></div>
<script>
      drawCircle(100,  'magenta', 'circle2');
</script>

Ce qui donne:

L'utilité en n'est pas vraiment accrue.