CSS to achieve a simple rounded corner effect

At present, we want to use the fillet effect in the Web page, always by cutting the graph and then nesting a lot of Div, with the background to achieve rounded corners effect. For the front-end development engineers, rounded corner is really a love and hate things, on the one hand, to take into account the designer's pursuit of aesthetic effects, on the other hand, have to add a lot of work input. Accidentally see someone else write a pure CSS to achieve the rounded corners effect, research to find for those who need more simple rounded corner effect is a good way. Summed up, you can achieve an adaptive pure CSS fillet effect.

First, let's look at the structure of the general rounded corners:

From the following figure you can clearly see the relationship between the rounded corners and the straight edges, in fact, the rounded corners can be seen by the pixel is composed of straight edges:

So there is a CSS to achieve the idea of rounded corners, that is, by using 1px horizontal lines to stack out the rounded corners, where border and background color fill to achieve rounded border, while setting different values of the left and right margin (1px as the base) to achieve dislocation, Thus, a simple fillet effect is realized in the whole.

Here's the code:

HTML section (idea is "head + content + Bottom"):

I am the content
I am the content
I am the content
I am the content

Through the <B> tag to form a DOM structure, the upper and lower three parts are flattened to form a rounded whole.

CSS style sections (mainly border colors and margin values):

It is easy to see that this is not a true fillet, there is no good transition effect, only to a certain extent, the simulation of the principle of the rounded corners. It is not very useful for rounded corners that require a high effect and are more complex to design.

The specific results are as follows: