Explain border radius property of CSS3

• border-radius property of Css3 allows to give a web page element the looks of rounded corners.

• You can specify it like this:
• border-radius: 10px

• You can specify different radius value for each corner of the element. You can specify 4 values for each corner, 3 values, 2 values, and 1 value for all corner:
• If 4 values are specified then 1st, 2nd, 3rd, 4th value will apply to top-left, top-right, bottom-right, bottom-left corner respectively.
• For ex: border-radius: 40px, 30px, 20px, 10px; top-left = 40px top-right = 30px bottom-right= 20 px bottom-left = 10px
• If 3 values are specified then 1st, 2nd, 3rd value will apply to top-left, top-right, and (bottom-left & bottom-right) respectively. For ex: border-radius: 40px, 30px, 20px;
• In above ex: top-left = 40px top-right = 30px bottom-left and bottom-right = 20 px
• If 2 values are specified then 1st and 2nd value will apply to following 2 sets respectively. For ex:
• border-radius: 40px, 30px;
• In above ex: top-left and top-right= 40px bottom-left and bottom-right = 30px
• If only value is specified then all corners will have the same value: 
• For ex: border-radius: 40px;

• You can create elliptical corners too: 
• For ex: border-radius: 40px/20px;

• If you have to specify only one border than you can specify it as follows
• border-top-left-radius
• border-top-right-radius
• border-bottom-left-radius
• border-bottom-right-radius