Rounded corners in Mailchimp templates - CSS or image-based

Question

I am creating an email template for Mailchimp. I have downloaded a template and am now placing my content per the requirements (I know about using Mailchimp template language). My problem is that I have to use rounded corners and am using image-based rounded corners.

When I edit the tables in the Mailchimp visual editor the image-based rounded corners become broken and no longer work.

Should I use CSS, or image-based, rounded corners? Any suggestions please.

*EDIT : Always use images This is what i got as best solution..

you can see the 9 boxes here with images that don't work properly as i wanted http://hsikander.zxq.net/Final/odesk.html — Sikander, Mar 03 '13 at 14:18

score 10 · Answer 1 · answered Mar 03 '13 at 07:36

Mailchimp uses CSS-based rounded corners in their Email Blueprint templates. Here's a chart from CampaignMonitor showing some of the email clients border-radius (and the -moz and -webkit prefixes) will/won't work in.

The CSS-based rounded corners won't work in every email client, but will fail gracefully in clients that don't support the border-radius property. Image-based rounded corners will not display when a reader doesn't have images enabled, and as you've experienced, maintaining the image-based rounded corners in the MailChimp visual editor can be tough depending on how your template is setup.

My suggestion would be for CSS-based rounded corners, using the prefixes to cover the widest range of email clients:

border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;

so what about those browsers /clients that dont support css based corners — Sikander, Mar 03 '13 at 14:19
Browsers/clients that don't support CSS-based rounded corners will see square corners. It's a trade-off for sure, each method has it's pros/cons. If it's possible to look at your lists' user agents that might help make the decision. If your list contains a high percentage of clients that support CSS-based rounded corners than CSS-based rounded corners it is. — Brett DeWoody, Mar 03 '13 at 16:25

score 2 · Accepted Answer · edited May 23 '17 at 12:01

2

Use images, they are 100% supported. Example here of how to do it correctly.

You'll need to upload the corner images to be hosted either by Mailchimp or your own URL. If they are, Mailchimp may be reformatting your code. Not sure if it is a wysiwyg as I'm not a Mailchimp user, but you can always edit the output code to put the image URL's back if that is the case.

edited May 23 '17 at 12:01

Community

1
1

answered Mar 04 '13 at 23:01

John

11,985
3
45
60

Rounded corners in Mailchimp templates - CSS or image-based

2 Answers2