How to Achieve Rounded Corners in Outlook Emails Without Images?

Achieving Rounded Corners in Outlook without Images

The CSS property border-radius is widely supported, allowing for the creation of rounded corners in browsers. However, it falls short when it comes to Outlook. This issue has prompted developers to seek alternative methods to create rounded corners without the use of images.

One solution lies in the combination of Outlook conditional comments and VML (Vector Markup Language). The following code can be integrated into your HTML to achieve the desired effect:

<code class="html"><div>
    <!--[if mso]>
    <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://www.EXAMPLE.com/" style="height:40px;v-text-anchor:middle;width:300px;" arcsize="10%" stroke="f" fillcolor="#d62828">
        <w:anchorlock/>
        <center style="color:#ffffff;font-family:sans-serif;font-size:16px;font-weight:bold;">
            Button Text Here!
        </center>
    </v:roundrect>
    <![endif]-->
    <!--[if !mso]> -->
    <table cellspacing="0" cellpadding="0">
        <tr>
            <td align="center" width="300" height="40" bgcolor="#d62828" style="-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; display: block;">
                <a href="http://www.EXAMPLE.com/" style="color: #ffffff; font-size:16px; font-weight: bold; font-family:sans-serif; text-decoration: none; line-height:40px; width:100%; display:inline-block">
                    Button Text Here!
                </a>
            </td>
        </tr>
    </table>
    <!-- <![endif]-->
</div></code>

Note that this solution has been tested in Outlook 2010 and major browsers only. It does not support OWA, Outlook.com, or mobile browsers.

The above is the detailed content of How to Achieve Rounded Corners in Outlook Emails Without Images?. For more information, please follow other related articles on the PHP Chinese website!