CSS3 Border-radius property to draw a circle effect (border-width with value)

We know that Border-radius can draw the effect of a circle, but if the radius of the Border-radius is less than the border thickness, then the inner border does not have rounded effect

Such as:

The code is:

div#circle { 
width:100px; 
height:100px; 
Background-color: #efefef; 
border:50px #a72525 solid; 
-webkit-border-radius:30px; 
}

If you change the radius to a larger size than the border thickness, the effect is:

The code is:

div#circle{ 
width:100px; 
height:100px; 
Background-color: #efefef; 
border:30px #a72525 solid; 
-webkit-border-radius:40px; 
}

Why does the first interior have no rounded corners effect? Because the inner radius is equal to the outer diameter value minus the border thickness value, when their value is negative, the inner diameter defaults to 0 (because Border-radius cannot be negative.) )。 It also shows that the center of the inner and outer curve of Border-radius is not necessarily consistent. The center of the inner and outer curves will be in the same position only if the border thickness is 0 o'clock.

If you need to draw the effect of the circle, you need the inner border is a circle, the outer border is also a circle. When the border value is 0 or very small, the width is less than equal to 2*r when the circle can be obtained. Like what:

Div#circle1
{
text-align:center;
border:1px solid #a1a1a1;
Background: #dddddd;
width:200px;
height:200px;
-moz-border-radius:100px;
-webkit-border-radius:100px;
border-radius:100px;
}

The effect is as follows:

Another example:

Div#circle1
{
text-align:center;
border:1px solid #a1a1a1;
Background: #dddddd;
width:150px;
height:150px;
-moz-border-radius:100px; 
-webkit-border-radius:100px;
border-radius:100px;
}

The effect is as follows:

However, the border thickness value cannot be ignored when the rule is invalidated.

Border thickness value, will make the circle the outer radius and internal radius (figure ugly Don't spit ah ~ ~)

The code is:

div#circle2 { 
width:80px; 
height:80px; 
Background-color: #efefef; 
border:20px #a72525 solid; 
-webkit-border-radius:60px; 
}

The inner radius is equal to the outer diameter value minus the border thickness value.

This time, we should make, r must be greater than equal to width+2* (border-width) half, R must be greater than or equal to the width of half. In the example above, the set value of the-webkit-border-radius is at least (80+20*2)/2=60, the other parameters remain unchanged, the-webkit-border-radius is set to 60 or 70, 80, 90 ... that is greater than 60. The effect is the same.

These, most of them are summarized by the fish themselves, the mistakes please point out, we learn together.