About CSS making rounded corners

Three stages:

1. Background image;

2.css2.0+ the rounded corners of the tag;

3.css3.0 Fillet Property (Border-radius).

1.1. Background image--Fixed width, highly adaptive rounded corners

Set the width for a container

Add a div above the body, the rounded corners as the background, and a div below the body, with the following rounded corners as the background.

1.2. Background image--wide-height adaptive rounded corners

The container is positioned relative to the top left, upper right, bottom left, and right div at Four Corners to form a rounded angle to cover the original angle.

2.css2.0+ Tag Simulation Fillet

Oh, I've decided to skip it, just css3 it right.

3.css3.0 Fillet Properties (Border-radius)

To the body that needs a fillet, set the Border-radius property, in pixels or percentages, to indicate that the radius of the fillet is larger and more arcs.

Upper left Border-top-left-radius, upper right Border-top-right-radius, lower right Border-bottom-right-radius, lower left Border-bottom-left-radius

Border-radius: Left arc below right Radian in upper left arc, (clockwise)

Border-radius: Upper left and lower right radian upper right and left radian; (diagonal)

Do not set the Radian to 0 alone, not none;

-moz-compatible with old Firefox-ms-compatibility with old ie-webkit-Safari, Chrome

Comparison:

Background picture realization Fillet is mainstream (2014)

css2.0 add a lot of meaningless code, the implementation of the effect is not natural, etc.

CSS3 code can achieve the effect, but in IE8 the following version is not supported, widely used in mobile, is the trend.

About CSS making rounded corners