Home > Article > Web Front-end > 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