Square and Rounded Borders

Read : Browser Specific Definitions.
The post is created in Example and Explanations order.
Let's start with,

1. .krish{
   border:3px solid white;
   -moz-border-radius:35px;
   border-radius:35px;
   }
   

   Output
2. .krish{
   border:3px solid white;
   -moz-border-radius-topleft:35px;
   border-radius-topleft:35px;
   }
   

   Output
3. .krish{
   border:3px solid white;
   -moz-border-radius-bottomright:35em;
   border-radius-bottomright:35em;
   }
   

   Output
4. .krish{
   border:3px solid white;
   -moz-border-radius-bottomright:35pt;
   border-radius-bottomright:35pt;
   }
   

   Output
5. .krish{
   border:3px solid white;
   -moz-border-radius:35px 0px 35px 0px;
   border-radius:35px 0px 35px 0px;
   }
   

   Output
6. .krish{
   border:3px solid white;
   }
   

   Output

Explanations :-

1. border-radius:35px; will yield rounded border for all sides
2. border-radius-topleft:35px; will yield rounded border at the Top left side and note that the type is "px" pixel.
3. border-radius-bottomright:35em; will yield rounded border at the Bottom Right and note that the type is em where 1em = 16pt "pt" is points
4. border-radius:35px 0px 35px 0px; will yield rounded borders at topleft and bottom right postitions. the general syntax is
   border-radius:topleft topright bottomright bottomleft;
   It can be in any type.
5. When you don't mention border-radius property, there will be no rounds, but there will be square borders