How does this CSS produce a circle?

Problem

The CSS is as follows:

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

What causes the circle below to appear?

Assume a rectangle with a width of 180 pixels and a height of 180 pixels looks like this:

It might look like this after adding border-radius 30 pixels:

If the radius is increased, the rectangle shrinks to the point where it will practically vanish.

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

Asked by Navin Rauniyar

Solution #1

Let’s break it down into two questions:

Consider the following regions of a standard box (source):

If the correct box model is used (no quirks mode, no old Internet Explorer), the height and width only apply to content.

The border-radius is applied to the edge of the border. If there is no padding or border, your content edge will be immediately affected, as seen in your third example.

This indicates that your CSS rules produce a box with only a border. According to your guidelines, this border should have a maximum width of 180 pixels on both sides, as well as a maximum radius of the same size:

The actual content of your element (the little black dot) is virtually non-existent in the image. You’d end up with the green box if you didn’t use any border-radius. The blue circle is created by the border-radius.

If you only apply the border-radius to two corners, it becomes clearer:

#silly-circle{
    width:0; height:0;
    border: 180px solid red;
    border-top-left-radius: 180px;
    border-top-right-radius: 180px;
}

Because all of the corners/borders in your example have the same size and radius, you obtain a circle.

Answered by Zeta

Solution #2

Demo

Let’s take a look at the question in a different light using this illustration:

It takes two sides of its border to make a radius. If border-radius is set to 50 pixels, 25 pixels will be taken from one side and 25 pixels from the other.

It would look like this if you took 25 pixels from each side:

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

It has 180 pixels from top to bottom and 180 pixels from right to left. The output would then be as follows:

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

Consider what happens if you only apply border radius to two corners unequally:

Then it would take some time.

Then it would create something similar to this.

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

It can occupy up to half of the border size, so 180 pixels divided by two equals 90 pixels. The result would be a circle like this.

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

Because all corners must have the same radius value.

It makes a circle by dividing its edge into equal halves.

Answered by Bhojendra Rauniyar

Solution #3

Borders are the outer box of any content and if you apply radius on it, it will simply produce the circular edge.

Answered by rahul_pratap

Solution #4

I believe it first generates a rectangle with height and breadth of 180px, then curves each corner with a set radius of 30px. As a result, it creates a boundary with the specified radius.

Answered by SanketS

Solution #5

Both.a and.b will provide the same result.

Q. What was the purpose of using width: 360px; height: 360px;?

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

I hope this violin aids your comprehension of the idea.

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

Answered by Rajender Joshi

Post is based on https://stackoverflow.com/questions/16189208/how-does-this-css-produce-a-circle