CODEWITHSUNDEEP
htmlcss
Pinch
Pinch

Reputation: 4207

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

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.

Upvotes: 6

Views: 41956

Answers (3)

Mr. Alien
Mr. Alien

Reputation: 157334

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)

Upvotes: 13

Joeytje50
Joeytje50

Reputation: 19112

For a circle shape using CSS, you should specify the same width as height (like you did), but you should always use 50% on your border radius. This is because when specifying a width and height, it will not be including the padding and border widths. This means that on either side of your div there's 4px of border, which is slightly stretching out your div.

Also, you can remove the browser prefixes such as -webkit- and -moz-. Chrome 4 and Firefox 3.6 are the last versions to need these prefixes and those really lack any browser usage share at all.

Your final code would look like this:

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

demo

Upvotes: 2

BenPog
BenPog

Reputation: 251

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

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

Upvotes: 6

Related Questions