Rounded corners seem to be a bane for designers as there is no way to implement them in a cross browser friendly way.  So we are used to implementing complex markup which is brittle and relies on images in the corner divs of a 9 div grid.

Since a couple of years the Mozilla and Webkit browsers have started accepting a specific CSS tag which helps us with this problem.  That’s the advent of the -moz-border-radius, -webkit-border-radius  and -khtml-border-radius attributes.   These will give you at the very least rounded (as opposed to elliptical) corners and can be used individually for each corner too.

More comprehensive info can be found here http://www.the-art-of-web.com/css/border-radius/

The remaining problem with this approach is as I’m sure we can all guess?!  Internet Explorer.  With no support in the browsers we love to hate we can implement a workaround with the help of javascript or browser behaviours which are a combination of HTML and JS in a  file which Internet Explorer can use to give it some retrospective functionality such as the border-radius.

One variant is using the PIE.htc file (progressive internet explorer) which you can find at www.css3pie.com   A couple of things to note here.

• This has to be implemented in the CSS file and the link to the behaviour has to be relative to the HTML file calling the CSS.  I’d therefore recommend the link be an absolute path from the document root as otherwise it gets complex to reuse the CSS file in various sub-levels.
• To prevent disappearing backgrounds/borders/shadows (z-index issues) set position:relative on the element you are giving rounded corners.
• I have also had more success in the past by including the PIE.htc before I call the border-radius attribute and now just make it a habit.

So to get rounded corners on near all browsers you can do something like this.

More recently the border-radius property is supported in IE9+, Firefox 4+, Chrome, Safari 5+, and Opera.  There is light on the horizon but because we are still dealing with a lot of legacy browsers and IE we still end up having to do something like this below to keep all browsers happy.  Whilst this is a nightmare to implement for each and every element where you want rounded corners this can be made a lot simpler with the use of the new SASS language and mixins – that will be another post entirely though!

An element can be done like this:-

Good luck with your rounded corners!
R.