A question about border-radius value setting

Problem Record

Today I was going to complete a small component similar to a progress bar. The prototype is like this (here it is 200px long and 28px high)

When I saw it, it was very simple. Leaving aside the style of the number 1, the overall parent style is a div with a semicircle on the left and an arc on the right.
This can be done using CSS border-radius. The left side has rounded corners, with a radius of 50px. The right side has small rounded corners. In the past, divs all had a radius of 8px. According to the order of corners in border-radius (analyzed in a clockwise direction, upper left, upper right, lower right, lower left), set border-radius: 50px 8px 8px 50px; and it will be fine. I write the style with great joy and open the browser.

I'm stupid, that's not right, I thought it was like this

In fact, the browser looks like this

Something is wrong. The angle on the right has been set, but why does it look like it’s not set at all? I changed 8 to 10px and tried it again, but it’s still almost the same as if it wasn’t set at all.

8px should give a noticeable curvature. Let's set all to 8px and see.

Yes, this is the curvature that 8px should have. Why does it change when it is changed to 50px on the left? Is it related to 50px? With doubts, I looked at Baidu.

Baidu said that the complete way to write border-radius (w3c) is

border-radius: 1-4 length|% / 1-4 length|%;

Usually we write border-radius: 50px, in fact, the complete writing should be:

border-radius : 50px 50px 50px 50px / 50px 50px 50px 50px 50px;

The four values ​​before the “/” represent the horizontal radius of the fillet, and the following four values ​​represent the vertical radius of the fillet.

Each order corresponds to (horizontal radius: top left, top right, bottom right, bottom left)/(vertical radius: top left, top right, bottom right, bottom left),

What are the horizontal radius and vertical radius?

According to the ratio of the horizontal radius to the vertical radius, the curvature of the angle can be adjusted. If the radii of the two are the same, it is a rounded corner. This is why I usually set the corners to be rounded, because I have never written a complete

For example, border-radius:10px 20px 30px 40px/40px 30px 20px 10px

It's like this

Let’s look back at our previous question.

We ignored the height of 28px. So, if we want to set the right side to be a semicircle, wouldn't it be fine as long as the horizontal and vertical radii are both 14px?

border-radius: 14px 8px 8px 14px / 14px 8px 8px 14px; 

In this way, the parent style is correct.

The 8px rounded corners set on the right side before seem to have no effect. Maybe it is proportionally compressed compared to 50px, because the left side is originally 28px high, and a radius of 50px is inserted into it. I calculated (14 * 8 / 50 = 2.24), which is equivalent to setting

border-radius: 14px 2.24px 2.24px 14px / 14px 2.24px 2.24px 14px;

Be careful when writing styles in the future, small problems can become big ones.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.