How to Create Rounded Corners in Outlook Emails Without Images?

Styling Rounded Corners in Outlook Without Images

Creating rounded corners in email clients can be straightforward using CSS. However, the traditional method of using the CSS border-radius property doesn't work in Microsoft Outlook. This limitation presents a challenge when designing emails with rounded corner elements.

Fear not, there is a solution that allows you to achieve rounded corners in Outlook without resorting to using images. The key lies in utilizing Outlook's conditional comments and VML (Vector Markup Language).

<!--[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]> -->
<!--<![endif]-->

This code produces buttons with rounded corners in Outlook 2010. It uses Outlook's conditional comments to specifically target Outlook and apply the VML code. The VML code itself defines the rounded rectangular shape and its attributes, such as color and text.

Note that this solution has been tested in Outlook 2010 and major browsers but not in OWA, Outlook.com, or mobile browsers. It is always advisable to test your code across various platforms to ensure compatibility.

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