CODEWITHSUNDEEP
htmlemailcss
Julie
Julie

Reputation: 263

Border-Radius not working in Email and Browser

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.

Upvotes: 7

Views: 30033

Answers (3)

Luc125
Luc125

Reputation: 5857

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.

Upvotes: 4

Ahsan Rathod
Ahsan Rathod

Reputation: 5505

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

Upvotes: 1

rickyduck
rickyduck

Reputation: 4084

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.

Upvotes: 6

Related Questions