How to Create Rounded Corners in Outlook Emails Without Using Images?-CSS Tutorial-php.cn

How to Create Rounded Corners in Outlook Emails Without Using Images?

Barbara Streisand

Release： 2024-10-29 18:33:03

Original

819 people have browsed it

How to Create Rounded Corners in Outlook Emails Without Using Images?

Creating Rounded Corners in Outlook Without Images

You can implement rounded corners in numerous email clients using the CSS property border-radius. However, Outlook does not natively support this property. While there are alternative methods involving images, they can be restrictive. Is there a technique to achieve rounded corners without using images in Outlook?

Outlook 2010 provides a solution using conditional comments and VML (Vector Markup Language). This code can produce buttons with rounded corners:

<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>

Copy after login

This method is supported in Outlook 2010 and major browsers. It does not work in OWA, Outlook.com, or mobile browsers.

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