Border Radius

CSS3 Border Radius

Border Radius was introduced in CSS3. Border Radius property is used to round the corners of an element, both rectangle or square shaped elements like images and boxes. Border Radius is supported by all HTML5 based Browsers, including IE 9.

Border Radius Generator

Border Radius Generator

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 Examples with code

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.
border-radius:10px	Set Border radius = 10px for all four corners. border radius in px is used to set circular corners.
border-radius:20px	Set border radius =20 px for all four corners.
border-radius:50%	Set border radius = 50% border radius in percentage is used to set elliptical borders.
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.
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.
border-top-left-radius:50px	set border radius =50px for top-left corner only.
border-top-right-radius:50px	set border radius =50px for top-right corner only.
border-bottom-right-radius:50px	set border radius =50px for bottom-right corner only.
border-bottom-left-radius:50px	set border radius =50px for bottom-left corner only.
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.
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.
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.
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.
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.
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.
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.
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.

Border Radius Browser Compatibility