How does this CSS produce a circle?

This is the CSS:

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

How does it produce the circle below?

Suppose, if a rectangle width is 180 pixels and height is 180 pixels then it would appear like this:

After applying border-radius 30 pixels it would appear like this:

The rectangle is becoming smaller, that is, almost going to disappear if the radius size increases.

So, how does a border of 180 pixels with height/width-> 0px become a circle with a radius of 180 pixels?