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

Answer 1

Newsletters in email campaign tools like (outlook, gmail, hotmail) has less CSS support. Moreover, border-radius is supported for web browsers not for email clients.

It is better to use for background images, pure images, gradients, round corners and 3d related stuff instead of using CSS styling.

See this reference: Campaign Monitor

This reference shows which CSS property is supported by different email clients.

See other references: Email newsletter not rendering correctly

Answer 2

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 3

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.