Circle with border looks not circular, jagged and not smooth, why?

Question

why is my css circle not smooth?

If i do a HTML5 Canvas its really nice.

<div id="circle"></div>
    <style>
    #circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border:4px solid blue;
}
</style>

http://jsfiddle.net/nkBp8/

Using Chrome and latest IE

Notice the extreme top bottom right left points appear flat.

Answer 1

Because you think you are using 50% but you aren't, you have used border-radius: 50px; but that's wrong, you are using border of 4px which you forgot to add to the box sizing of your element (If you are aware of how box model of CSS really works).

So you should be using border-radius: 54px; instead cuz your total element's height and width sums up to 108px counting border on both the sides.

Demo

---

It is better if you use 50% in such cases

Demo

#circle {
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
    border:4px solid blue;
}

---

If you want to stick with the 50px measurement, than you can alter the box model rendering by using box-sizing: border-box;

box-sizing: border-box;

Demo (Altered Box Model)

Answer 2

You should use border-radius as a percentage, like this :

    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;