Border-Radius is the method of adding a round frame to the element

Border-Radius: 10px; /* All angles use rounded corners with a radius of 10px* /

Border-Radius: 5px 4px 3px 2px; /* The four radius values ​​are the upper left corner, upper right corner, lower right corner and lower left corner, clockwise* /

Don't think that the value of Border-Radius can only be used in PX units. You can also use percentage or EM, but the compatibility is not very good.

Method: Set the height (Height) to half of the width (width), and only set the radius of the upper left corner and upper right corner to be consistent with the height of the element (it is also possible).