Home > Developer > Web Develop
As you may all know, the Border-radius in CSS3 is used to define the fillet, and when I used Border-radius, I used the Border-radius with a parameter. But recently found that the original Border-radius can also be based on the parameters can be different to achieve different rules of the effect of the round, the following talk about the Border-radius with the meaning of several parameters it.
One, Border-radius with one parameterBorder-radius with 1 parameters, it is easy to understand that this parameter is suitable for Four corners. (This is still easy to understand, I will not be wordy here)
Two, Border-radius with two parametersWith two parameters, the first parameter represents the top left and bottom right , and the second parameter represents top right and bottom left . (Hey, I remember that-cross the same) you can try the following code to verify yo.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>Div{width:200px;Height:200px;Border-radius:50px 100px;background:#FB9E84; } </style></Head><Body> <Div></Div></Body></HTML>View CodeThree, Border-radius with three parameters
With three parameters, three parameters represent top left , top right, and bottom left, and bottom right respectively. Examples are as follows:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>Div{width:200px;Height:200px;Border-radius:50px 20px 100px;background:#FB9E84; } </style></Head><Body> <Div></Div></Body></HTML>View Code
Four, Border-radius with four parameters
With four parameters, it is also easier to understand, four parameters are indicated on the left, upper right , bottom right , bottom left --that is , in the clockwise direction to resolve. For example:
border-radius:20px 30px 50px 100px;
The resulting result is this:
V. Border-radius can also be set separately for each fillet
Border-radius the fillet is set separately, the method is as follows:
Top left: Border-top-left-radius
Top right: Border-top-right-radius
Lower right: Border-bottom-right-radius
Lower left: Border-bottom-left-radius
Vi. custom-made special shapes-parameters separated by slash "/"When the argument is separated by a slash, the first parameter represents the horizontal radius of the fillet, the second parameter is the vertical radius of the fillet, and the following example is not quite understandable.
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Document</title> <style>Div{width:200px;Height:200px;Border-radius:200px/100px;background:#FB9E84; } </style></Head><Body> <Div></Div></Body></HTML>View Code
Run this example to see
Seven, 4 rounded corners individually customized special shapes
We know that you can use slashes to customize special fillets, but when customizing different special shapes for 4 rounded corners, it is important to note that the form is border-radius:20px 30px 40px 50px/50px 40px 30px 20px; This form, instead of border-radius:20px/50px 30px/40px 40px/30px 50px/20px; (This form is not correct), be sure to pay attention when using!
Finally, the use of a slash to customize the parsing order of the special fillet is the same as the above parsing order, you can follow the above calculation.(ps:ie9+, Firefox 4+, Chrome, Safari 5+, and Opera support Border-radius properties, IE8 and lower versions do not support Yo!) ）
Border-radius in CSS3
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
