Pages

Monday, April 11, 2011

How to provide cross browser support for the border-radius CSS property


The border-radius property is not well supported by mayn browsers. However we can use proprietary properties provided by Firefox an Webkit. But there naming is inconsistent. Following shows border-radius equivalence for CSS, Firefox and Webkit.
IF you are looking for IE hacks look hrere
http://jayaprabath.blogspot.com/2011/11/rounded-corners-for-ie-using-htc-files.html


CSS3 Firefox Webkit
border-radius -moz-border-radius -webkit-border-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-
top-left-radius
border-top-right-radius -moz-border-
radius-topright
-webkit-border-
top-right-radius
border- bottom-right-radius -moz-border-
radius-bottomright
-webkit-border-
bottom-right-radius
border- bottom-left-radius -moz-border-
radius-bottomleft
-webkit-border-
bottom-left-radius