A circle with a frame does not look circular, jagged and uneven, why?

Question

Why is my css circle not smooth?

If I make HTML5 Canvas, it is 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 the latest IE

Notice that the extreme upper lower right left points appear flat.

Answer 1

Since you think you are using 50%, but you didn’t do it, you used it border-radius: 50px;, but it’s wrong, you use borderof 4px, which you forgot to add to the window size of your element (If you know how the CSS window model really works).

, border-radius: 54px; , height width 108px .

---

50%

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

---

50px, box-sizing: border-box;

box-sizing: border-box;

( )

Answer 2

, :

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

Answer 3

CSS , ( ), 50% . , . , div 4px , div.

In addition, you can remove browser prefixes such as -webkit-and -moz-. Chrome 4 and Firefox 3.6 latest versions need these prefixes and those that really lack browser sharing .

Your last code would look like this:

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

demonstration