Well , yet now you have learnt many things in css . But css still does not end . As time increases the diffrent version of css comes in existence , as the styling required more in a webpage . At this time , we can do many more things with this styling .
Now the css3 ccomes in existence and most of the designer use it in their webpages . The most interesting thing about css3 is its animation designing , multiple background , etc . Yes , we can design an animation inour webpage through css3 .
But we are going to discuss a different thing the border radius . You have created border in your page elements . But now you are also able to rounded cornered border . I will discuss here the same thing . The syntax for creating border radius is -
syntax : -
border-radius: [ radius ] ;
Here , the radius part will be either an integer or the percentage .
ex : -
1 . border-radius:12px;
2 . border-radius:30%;
To use the border-radius use background of an element . whenever you give background to an element . Then background is rectangle shaped . Then you can assign different radius to each different corner . The syntax will be as -
syntax : -
border-radius:[ radius1 radius2 radius3 radius4 ];
Now the question is radius1 will be of which corner ?and some more like it ... Now I have the answer , the figure given below explain it clearly -
Now the css3 ccomes in existence and most of the designer use it in their webpages . The most interesting thing about css3 is its animation designing , multiple background , etc . Yes , we can design an animation inour webpage through css3 .
But we are going to discuss a different thing the border radius . You have created border in your page elements . But now you are also able to rounded cornered border . I will discuss here the same thing . The syntax for creating border radius is -
syntax : -
border-radius: [ radius ] ;
Here , the radius part will be either an integer or the percentage .
ex : -
1 . border-radius:12px;
2 . border-radius:30%;
To use the border-radius use background of an element . whenever you give background to an element . Then background is rectangle shaped . Then you can assign different radius to each different corner . The syntax will be as -
syntax : -
border-radius:[ radius1 radius2 radius3 radius4 ];
Now the question is radius1 will be of which corner ?and some more like it ... Now I have the answer , the figure given below explain it clearly -
so finally you can see from picture that corner no. 1 has radius1and so on .
If you use only two elements in radius part as -
border-radius:[ radius1 , radius2 ];
Then radius1 will be of corner 1 and corner 3 . And radius2 will be of corner 2 and corner 4 . A full example of four radius elements is as given below .I have created a class corner here .
ex : -
.corner{background:#9090cc; text-align:center; color:red; width:600; border-radius: 18em 2em 12em 2em; }
you can also use px instead of em I used here . But remember em is greater unit than px , so shape will be more rounded in em with same values.
I have created an element with the same script , and it looks as -
- Thanks to visit.
