Сделать круг большим, сохраняя круг, как фигура (CSS)

Question

Поэтому у меня есть кружок в html и css, и, похоже, когда я делаю его слишком большим, он начинает превращаться в странный шарик. Как бы я сделал его большим, и все же сохранил бы форму круга?

Спасибо!

Вот jsfiddle: http://jsfiddle.net/aritro33/bUqNA/

Вот HTML-код:

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

Вот CSS:

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

Answer 1

+ Изменить border-radius в 150px

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

Радиус должен быть половиной ширины или высоты. Также высота и ширина должны быть равны

FIDDLE

В противном случае вы можете поставить border-radius как 50%, радиус границы напрямую связан с шириной элементов.

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

FIDDLE

Answer 2

Используйте объявление с радиусом границы 50%. Если вы хотите увеличить круг, увеличьте ширину и высоту элемента в пикселях. Однако убедитесь, что ширина и высота одинаковы. Это всегда должно быть квадратной формы