Rounded Borders and Cross-Browser Compatibility

5 Sep, 2011

Rounded borders are great design tools. They would be even greater if they were supported in the same way by all browsers but, unfortunately, they aren't. There are some hacks required to get browsers to display these features correctly. The CSS3 definition for rounded corners is border-radius, but you have to apply it in different ways to ensure compatibility.

Internet Explorer

IE requires that you use a meta tag for rounded border support. The format is:

<meta http-equiv="X-UA-Combatable" content="IE-edge/>

You can specify your borders within a style tag after this, allowing you to display rounded borders on Internet Explorer. The caveat is that it has to be Internet Explorer 9. Older versions won't support it.

You can also use a JavaScript solution called CurvyCorners. This allows you to get the border effect without having to use images as a workaround. You can get the script at: http://Code.Google.Com/p/curvycorners/.

Webkit

Webkit has its own prefix for rounded borders. It's not hard to implement, however. The code is simply:

For the Mozilla version, all you have to do is replace "webkit" with "moz" and you're good to go. You will have to provide lines for both webkit and Mozilla to get it to function correctly. Currently, rounded corners work well on Safari, Chrome and Camino, in addition to Firefox and, with a bit of work, IE9.

You can also add a behavior in an .htc file to get rounded corners, though it's buggy, according to most developers. Currently, the best way to get the effect is to specify it for each individual browser or, if it's not going to cause an issue with your visitors, to use the JavaScript code to provide the effect and, thus, avoid having to use images as fallback measures for getting this effect on every browser.