How to Create Rounded Corners in Outlook Emails: A CSS and VML Solution?

Rounded Corners in Outlook: A CSS and VML Solution

Creating visually appealing emails can be challenging, especially when it comes to designing elements like buttons. While CSS allows you to achieve rounded corners in many email clients, it may not work as expected in Outlook.

Problem:

Standard CSS code for creating rounded corners, such as -moz-border-radius and border-radius, does not render properly in Outlook.

Solution:

One effective way to create rounded corners in Outlook without using images is to combine Outlook conditional comments with VML (Vector Markup Language). VML is an older technology used for drawing shapes in web pages, but it is still supported in Outlook.

Code:

Here's an example code that creates a button with rounded corners in Outlook 2010:

<code class="html"><div>
    <!-- Outlook conditional comments for VML -->
    <!--[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]-->
    <!-- Non-Outlook fallback -->
    <!--[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>

In Outlook 2010, the VML code will create the rounded corners, while non-Outlook browsers will display the fallback table-based design with rounded corners using CSS.

Note: This solution has been tested in Outlook 2010 and major browsers only, and may not work in Outlook Web App (OWA), Outlook.com, or mobile browsers.

The above is the detailed content of How to Create Rounded Corners in Outlook Emails: A CSS and VML Solution?. For more information, please follow other related articles on the PHP Chinese website!