We recently added rounded corners to MailChimp’s built-in email template designer. It’s a subtle upgrade, but it can make a big visual impact. Anywhere you see settings for “border” you can make it rounded:
You can edit the thickness and the color of all borders (note we’ve also added dashed, dotted and more). Here’s a template with a small 5 pixel border:
and here’s what it looks like with a border of 15:
Smoove & Seamless Curves
Whenever you set your rounded corners, MailChimp automatically generates the corner graphic for you, and anti-aliases it with the adjoining background color to soften its edges. That means no jagged edges, and all the radii are perfectly round.
For example, I added a rounded corner to my email’s body (do this under default-text settings), and it grabbed the color from the footer to “fill the gap” and make a seamless transition:
Rounded corners aren’t available in all parts of the templates yet (due to the modular construction of our layouts), so it may take a little creativity to achieve the perfect “Web2.0 look” (sorry, I couldn’t resist saying that). But look for more updates to come soon, making rounded corners even easier to use.
For now, you can use a little creativity to build some elegant looking templates, like:
In case you missed it, that’s a blatant copy of Apple’s emails, just so you can see that it can be done.
Or, you can make some coupon emails like:
YES! I am very excited about such a small feature. These small rounded corners really do make a difference.
I am trying to get the rounded edges that you have the first image under the section of “Smoove & Seamless Curves” and I can’t get it… any chance you can do a video walk through of this?
Yes, I’m putting together all the assets I need to do this. The trick is that the rounded edges aren’t going to do what you want if you use the header slot for logos and such. So I move my logo down into the body, and leave the header slot blank. Works out really nicely that way.
I love the new feature, except I’ve noticed that it only seems to work with Mail Chimp’s standard color palate. I’m trying to set my page borders (hex code 00405b) to be rounded but it won’t work because I’m using a ‘custom’ color. Is this just a temporary glitch?
JM
Thanks for your reply Ben. Oddly enough it will work just fine (with or without my logo in the header section) if I set the page border to a MailChimp palate color and then set the border to “rounded”.
If I do the same thing but have my page border set to color 00405B, however, I just get little squares in the four corners of the page where the rounded effect should be.
It’s as if the editor doesn’t know how to produce a rounded effect with anything other than the 30 or so “default” colors. Will keep watching for a fix. Keep up the good work!
JM
I think the rounded corners are a really great way to clean up with look of your email campaign or even your website as well.
The rounded corners is a great feature. It really dresses up the e-mails. How about a slight drop shadow?
Also, how do I get a border around a specific section of body text? I would like to put a coupon within my e-mail without making the entire e-mail a coupon.
Lastly, you have a sample on your blog of a coupon in which there is a “Foods” logo above the coupon. How did you get the logo above the coupon?
Thanks in advance for your help.
Coming soon to MailChimp Academy…
I’m currently working up a video tutorial about this cool feature!
Not only will we demonstrate how to apply rounded corners, but we’re going to show you how you can get creative with our templates and make emails that look really similar to the ones you get from those BFC’s*.
Look out for it soon!
* – Big Fancy Corporations. I just made that up to appear hip. Or to use in case I have to text it someday, like, if I’m using Flutter http://www.youtube.com/watch?v=BeLZCy-_m3s.
Ahmed,
To get the word “Foods” above the coupon area, just use the TEXT option in your header if you just want to type it in, or simply upload your own graphic (if “Foods” was instead, say, a logo) into your header.
Just make sure the background color of the header area matches the background color of the page so it looks like it’s floating above that coupon.
Hope this helps!
Brad,
In the BODY tab, select DEFAULT TEXT.
Then over to the right you’ll see the controls for the border width and style. Crank up the width setting for a larger radius.
Is there an easy way to do rounded corners in a newsletter that is not based on one of Mailchimp’s templates? Like grabbing code which creates a “box” with round corners around a custom-made newsletter?
If not, is there a way to add more content to the body of a Mailchimp newsletter template than currently available? I can’t fit all my html code because there seems to be a limit, yet I like the rounded-corner feature that the template offers.
Thanks!
have you ever tried in Outlock2007?!
Hi, I have added the round corners in my newletter but I see that in Outlook it doesny show like it suppposed to.
I have a brown background and white body where the text is in and this white “page” has rounded corners. In outlook it shows like a brown background with a white midsection and a kind of a tab ( where the uppercorners are) and at the bottom the same.
How can I fix this?
Greats
Evan
Was this feature removed?
Yes, this one was killed a while back.