What is Border Radius

CSS-3 introduced a new property border radius to turn around corners of our 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: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
            
          

How Border radius Works

border radius
Border Radius

Border Radius Examples

Property Use Example
border-radius:none Remove boder 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

Browsers Compatibility

Chrome, Safari, Firefox 4, Opera, and IE9 support 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.