Draw Circle using css alone

Hector Barbossa picture Hector Barbossa · Aug 4, 2011 · Viewed 319.2k times · Source

Is it possible to draw circle using css only which can work on most of the browsers (IE,Mozilla,Safari) ?

Answer

Tatu Ulmanen picture Tatu Ulmanen · Aug 4, 2011

Yep, draw a box and give it a border radius that is half the width of the box:

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}

Working demo:

http://jsfiddle.net/DsW9h/1/

#circle {
    background: #f00;
    width: 200px;
    height: 200px;
    border-radius: 50%;
}
<div id="circle"></div>