Analysis on the principle of several Border-radius

1. border-radius:40px;
2. border-radius:40px/20px;
3. border-radius:40px 20px;
4. border-radius:40px 20px 10px 5px;

Today is mainly to test the above four kinds of border-radius.

First is the first kind.

border-radius:40px;

A value is set here, so the default 4 corners are rounded with a radius of 40, and the blue box is a square of 40 pixels wide. So the radius of the circle is equal.

The second Kind

border-radius:40px/20px;

There's a/20px here besides 40px. Here is the meaning of the circle is defined as an ellipse, in fact, the circle is not a special case of the ellipse? This expression, though there is, is not usually used much.

Third Kind

border-radius:40px 20px;

The difference between this and the second is that there is no/symbol, and its meaning is the same as the normal set margin. is to represent the meaning of the upper and lower left. No nonsense directly look at the picture.

Fourth type

border-radius:40px 20px 10px 5px;

The fourth is to write the order, from the upper left corner clockwise to the lower left, which is the order of the value of the Border-radius property.

Reprint Please specify: From the blog park, Manfredhu

Thank you

Analysis on the principle of several Border-radius