Make circle big while preserving circle like shape (css)

Question

so I have a circle in html and css, and it looks like when I make it too big, it starts becoming a weird blob. How would I make it big, and yet still preserve the circle like shape?

Thanks!

Here is the jsfiddle: http://jsfiddle.net/aritro33/bUqNA/

Here is the HTML:

<div id = "circle"></div>

Here is the CSS:

#circle{
    height: 300px;
    width: 300px;
    background-color: red;
    border-radius: 100px;
}

Answer 1

Change border-radius to 150px

#circle{
    height: 300px;
    width: 300px;
    background-color: red;
    border-radius: 150px;
}

The radius should be the half of the width or height . Also both the height and width should be equal

FIDDLE

Otherwise you can put border-radius as 50% , border radius is directly correlated with the elements width.

#circle{
    height: 300px;
    width: 300px;
    background-color: red;
    border-radius: 50%;
}

FIDDLE

Answer 2

Use border-radius ad 50%. If you want a bigger circle then increase the width and height of the div in pixels. However make sure the width and height is same. It should always be square shaped