How does setting width and height to 0, a large border width, and a matching border-radius create a circle in CSS?

How does this CSS produce a circle?

Let's first break down the CSS:

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

• width and height are both set to 0, which means the element will have no content.


• border is set to 180px solid red, which means the element will have a red border that is 180 pixels wide.


• border-radius is set to 180px, which means the corners of the border will be rounded to a radius of 180 pixels.

Now, let's think about how these properties work together to create a circle.

Where do width and height actually apply?

The width and height properties apply to the content of an element, not to the border. In this case, since the element has no content, the width and height properties have no effect.

Where does border-radius apply?

The border-radius property applies to the border of an element. It allows you to round the corners of the border to a specified radius. In this case, the border-radius property is set to 180px, which means the corners of the border will be rounded to a radius of 180 pixels.

What does this mean for our border-radius/circle?

When you combine the border and border-radius properties, you can create a circle. The border property creates a rectangular border around the element, and the border-radius property rounds the corners of the border to a specified radius. In this case, the border-radius property is set to 180px, which means the corners of the border will be rounded to a radius of 180 pixels. This creates a circle.

Here is a diagram that shows how the CSS rules in the example work together to create a circle:

In the diagram, the actual content of your element (the little black dot) is really non-existent. If you didn't apply any border-radius you would end up with the green box. The border-radius gives you the blue circle.

Further resources

• W3C: CSS Backgrounds and Borders Module Level 3 (esp. 5. Rounded Corners)


• Demonstration

The above is the detailed content of How does setting width and height to 0, a large border width, and a matching border-radius create a circle in CSS?. For more information, please follow other related articles on the PHP Chinese website!