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

css, html

Solution

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)

Problem

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.

Original source