Rounded Corners in Outlook Without Images

Rounded corners in outlook without images

http://www.campaignmonitor.com/css/ displays all css supported in major email clients. Rounded borders didn't even make it to the list. On the page there is a link to a full PDF, which notes that border radius is ONLY supported in Thunderbird 2

please note that you have to embed the styles in the html elements to support a broad range of email clients

You can find the full list of supported HTML elements and CSS styles in the following series of articles:

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)

Border-radius property not working in outlook

border-radius property is not supported by outlook, as it uses MS-word template. we need to code for outlook too. Please find the below piece of code which will work for both outlook and browser or other email clients.

<td>
  <div>
    <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://example.com" style="height:36px;v-text-anchor:middle;width:150px;" arcsize="5%" strokecolor="#EB7035" fillcolor="#EB7035">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:Helvetica, Arial,sans-serif;font-size:16px;">I am a button →</center>
      </v:roundrect>
    <![endif]-->
    <a href="http://example.com" style="background-color:#EB7035;border:1px solid #EB7035;border-radius:3px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:16px;line-height:44px;text-align:center;text-decoration:none;width:150px;-webkit-text-size-adjust:none;mso-hide:all;">I am a button →</a>
  </div>
</td>

Outlook rounded image with rounded background

Simple and full-proof fix...

Create a rounded image and either include the background colour in the image or use VML to create the rounded colour.

How to get a round images in html emails working in Outlook with VML?

I'd suggest changing your Outlook conditionals to this.

<!--[if (gte mso 9)|(IE)]>

<![endif]-->

Currently, you are hiding it from Outlook. If the VML proves too troublesome I'd recommend using a rounded image asset on a transparent background.

---

Related Topics