User Interface Designs, Add Colours, User Experience Design (UX Design), Website Usability, Website Accessibility, Mobile Apps Design, Custom Website Design & Development, UI patterns, CSS Forms,Responsive Website
Design, css, jQuery designs, Html5, CSS3,PHP, Google Angular JS Framework, Backjbone JS, MVC
Wednesday, June 2, 2010
Curved corner (border-radius) cross browser
This is a behavior htc file for Internet explorer to make CSS property " border-radius " work on all browsers. At present, all major browsers other than IE shows curved corner by adding 4 lines of csshe HTML:
-webkit-border-radius:10px; /*Safari and chrome*/
-khtml-border-radius:10px; /*Linux browsers*/
border-radius:10px; /*CSS3*/ }
<div class="curved">Curvd div</div>
For firefox, you can set border-radius by prefixing “-moz” to the css property. And ofcource for webkit use “-webkit” . Now IE ?? .. As IE is not a good browser to work with css, we need to make it so.
Here, you need to use a nice css hack. Some how I managed to have an htc file to make border-radius work in IE . Now adding the htc with one more line of css will make the curve work in IE browsers also behavior:url(border-radius.htc). You can download below source.
Download for radius.htc file : http://curved-corner.googlecode.com/files/border-radius.htc