Css3 Border Radius

Border Radius was introduced in CSS3. Border radius property is used to round the corners of an element in rectangular or elliptical shape, like images and boxes without using third party markups/scripts or CSS Tricks. Border Radius is supported by all HTML5 based Browsers, including IE 9.

Border Radius code

Border Radius is used with either single value or multiple values ( upto four max ).

            
            
 border-radius:10px;            // all latest browsers
	
 -webkit-border-radius:10px;    // for Chrome and Safari
	
 -moz-border-radius:10px;       // for Mozilla based browser
	
 -ms-border-radius:10px;        // for IE 9 and above
 
 -O-border-radius:10px;         // for Opera and opera mini browsers
            
          

How Border Radius Works

border radius
Border Radius

Border Radius property can have two units, px or %. px is used tu set rectangular border radius, and % is used to set elliptical border radius.


Border Radius Examples

Property Use Example
border-radius:none Remove border radius from all four corners. bordered
border-radius:10px Set Border radius = 10px for all four corners. border radius in px is used to set circular corners. aa
border-radius:20px Set border radius =20 px for all four corners. aa
border-radius:50% Set border radius = 50% border radius in percentage is used to set elliptical borders. aa
border-radius:100% 0 Set border radius = 100% for top-left and bottom-right and 0 for top-bottom and bottom-left. % is used to set elliptical borders. aa
border-radius:0 100% Set border radius = 0% for top-left and bottom-right and 100% for top-bottom and bottom-left. % is used to set elliptical borders. aa
border-top-left-radius:50px set border radius =50px for top-left corner only. aa
border-top-right-radius:50px set border radius =50px for top-right corner only. aa
border-bottom-right-radius:50px set border radius =50px for bottom-right corner only. aa
border-bottom-left-radius:50px set border radius =50px for bottom-left corner only. aa
border-radius:50px 0px set border radius =50px for top-left corner, 0 for top-right corner, 50px for bottom-right corner and 0px for bottom-left. aa
border-radius:0px 50px set border radius 0px for top-left corner, 50px for top-right corner, 0px for bottom-right corner and 50px for bottom-left. aa
border-radius:100px 0px 100px 0px set border radius 100px for top-left corner, 0px for top-right corner, 100px for bottom-right corner and 0px for bottom-left. aa
border-radius:0px 100px 0px 100px set border radius 0px for top-left corner, 100px for top-right corner, 0px for bottom-right corner and 100px for bottom-left. aa
border-radius:50px 50px 0px 0px set border radius 50px for both top-left and top-right corner, and 0px for bottom-left and bottom-right corner. aa
border-radius:0px 0px 50px 50px set border radius 0px for both top-left and top-right corner, and 50px for bottom-left and bottom-right corner. aa
border-radius:0px 50px 50px 0px set border radius 50px for both top-right and bottom-right corner, and 0px for top-left and bottom-left corner. aa
border-radius:50px 0px 0px 50px set border radius 50px for both top-left and bottom-left corner, and 0px for top-right and bottom-right corner. aa

Border Radius Browser Compatibility

Chrome, Safari, Firefox 4, Opera 11, and IE9 supports Border Radius without any vendor prefix (exp. border-radius). But we need to add another property like -moz-border-radius for Firefox 3.6 and earlier.