Border-Radius not working in Email and Browser

Question

I have been designing a newsletter, and whilst the border-radius work on my localhost (showing all the rounds edges) - but it does not work when tested through sample email. I emailed myself using yahoo mail and Firefox, it came out with sharp edges. It does not work in outlook 2007 as well.

Anyone know how to solve this problem? I will appreciated your help.

Answer 1

It will never work in outlook 2007 as that uses word as the renderer, which doesn't support most css.

For firefox, you need to add the -moz- prefix, please ensure you have done that.

If not, post your css and firefox version.

Answer 2

I do not think that Outlook 2007 support the border-radius property, so it is probably normal if it does not display rounded corners. If you are looking for a workaround, I suggest you to have a look at this question: How can I make rounded corners on non-CSS3 browsers?

For the CSS in modern browsers, currently you need to prefix certain proprties, for example:

.withRoundedCorners {
    border-radius: 5px;        // Standard
    moz-border-radius: 5px;    // Firefox
    khtml-border-radius: 5px;  // 
    o-border-radius: 5px;      // Opera
    webkit-border-radius: 5px; // Safari
    ms-border-radius: 5px;     // Internet Explorer 9+
}

I know it's boring... But it's temporary, in the future only border-radius will be required.