More on css

      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 -

           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 - 

                                    check our previous post on css -

• continue

    

               we have checked our all script with google chrome version 19.0.1084.52 .If you want to watch all effects of this css then update your browser or try to use mozilla firefox version greater than 10 . If you have any problem in the script then contact us .
                                                                                               - Thanks to visit.