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

Demo

Let's examine the question in another way with this picture demonstration:

Let's see first how border radius is produced?

To produce radius it takes two sides of its border. If you set border-radius to 50 pixels then it would take 25 pixels from one side and 25 pixels from another side.

And taking 25 pixels from each side it would produce like this:

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

Now see how much can it take maximum of square to apply on one corner?

It can take up to 180 pixels from top and 180 pixels from right. Then it would produce like this:

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

And see this how does it produce if we set non-equal value of radius?

Suppose, if you apply border radius only to two corners unequally:

• top-right-corner to 180 pixels

• bottom-right-corner to 100 pixels

Then it would take

• top-right: 90 pixels from the top and 90 pixels from the right

• bottom-right: 50 pixels from the right and 50 pixels from the bottom

Then it would produce like this

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

How much maximum of its border can it take of square to apply on all sides? And see how does it produce a circle?

It can take up to half of the border-size, that is, 180 pixels / 2 = 90 pixels. Then it would produce a circle like this

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

Why does it take only half of the square to apply on all sides?

Because all corners have to set their radius value equally.

Taking equal parts of its border, it produces a circle.