The use of CSS3 rounded borders-Escape Tornado

0. Quick Start

border-radius:50px;

1.border-radius detailed explanation

border-radius:50px;

Top right, bottom left, horizontal and vertical distance are 50px

border-radius:50%;

The % sign here is the base length and width of the CSS style element that has been applied

border-radius:50% 30% ;

Up and down, horizontal and vertical is about 50%, horizontal and vertical is 30%

border-radius:50% 30% 10%;

Up, horizontal and vertical is 50%, left and right, horizontal and vertical is 30%, down, horizontal and vertical is 10%

border-radius:10% 50% 30% 10%;

On the top, both horizontal and vertical are 10%. Right, horizontal and vertical are both 50%. Down, horizontally and vertically are 30%. Left, horizontal and vertical are all 10%

/The front is horizontal,/the back is vertical

border-radius:50% / 30% ;

Up, left, down, right, horizontal is 50%, vertical is 30%

border-radius:50% / 30% 10%;

Up, right, down, left, horizontal are 50%, up and down vertically 30%, left and right vertical 10%;

The rest of the rules have been given examples before they are used, so I won’t describe them one by one

2. Individual settings

border-top-left-radius:10%;

border-top-left-radius:10% 30%;

Bottom corresponds to top, right corresponds to left