Как этот CSS создает круг?

Это CSS:

div {
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}

Как получается круг ниже?

Предположим, что если ширина прямоугольника равна 180 пикселям, а высота равна 180 пикселям, то это будет выглядеть так:

После применения border-radius 30 пикселей это будет выглядеть так:

Прямоугольник становится меньше, то есть почти исчезает при увеличении размера радиуса.

Итак, как же граница 180 пикселей сheight/width-> 0px стать кругом с радиусом 180 пикселей?