How does this CSS produce a circle?

Question

This is the CSS:

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

How does it produce the circle

Answer 1

Both .a and .b will give the identical output.

Q. Why did I used width: 360px; height: 360px;?

A. border: 180px solid red; in .a works like border-width: 180px 180px 180px 180px; /* Top Right Bottom Left */.

Hope this fiddle helps you to understand the concept.

.a{
    width: 0;
    height: 0;
    border: 180px solid red;
    border-radius: 180px;
}
.b{
    background:red;
    width: 360px;
    height: 360px;
    border-radius: 180px;
}