Outlook桌面端border-radius属性失效问题求助

我在HTML中设置border-radius实现按钮圆角，但Outlook桌面端完全不生效。以下是我尝试的代码：

原HTML代码 #

<table border="0" cellspacing="0" cellpadding="10" valign="top">
                          <tr>
                            <td class="outlook-btn" align="center" style="font-size:18px; background-color:#FFFFFF;">
                              <font face="Arial, sans-serif">
                                <a  href="#" style="padding: 10px 25px; border-radius:5px; color:#df0024; text-decoration:none;">GET STARTED</a>
                              </font>
                            </td>
                          </tr>
                       </table>

尝试的Outlook条件注释CSS #

.outlook-btn{
padding: 10px 25px !important;
border-radius: 20px !important;
border: 1px solid #000000 !important;
}

期望按钮显示圆角效果，但实际在Outlook桌面端呈现的是直角按钮。

解决方案：用VML兼容Outlook桌面端 #

Outlook桌面端基于Word渲染引擎，不支持CSS的border-radius属性，必须使用VML（Vector Markup Language）来模拟圆角。以下是修改后的兼容代码：

<table border="0" cellspacing="0" cellpadding="10" valign="top">
  <tr>
    <td align="center" style="font-size:18px; position:relative;">
      <!--[if mso]>
      <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word"
        href="#" style="height:42px; v-text-anchor:middle; width:170px;" arcsize="10%" stroke="f" fillcolor="#FFFFFF">
        <w:anchorlock/>
        <v:textbox style="mso-fit-shape-to-text:true;">
          <center style="color:#df0024; font-family:Arial, sans-serif; font-size:18px; font-weight:normal;">
            GET STARTED
          </center>
        </v:textbox>
      </v:roundrect>
      <![endif]-->
      <!--[if !mso]><!-->
      <font face="Arial, sans-serif">
        <a href="#" style="padding: 10px 25px; border-radius:5px; color:#df0024; text-decoration:none; display:inline-block; background-color:#FFFFFF;">
          GET STARTED
        </a>
      </font>
      <!--<![endif]-->
    </td>
  </tr>
</table>

关键说明 #

• 条件注释：<!--[if mso]>块内的VML代码仅在Outlook桌面端生效，其他客户端会忽略这部分内容
• VML参数：
  • arcsize：控制圆角弧度，10%对应CSS中border-radius:5px的比例（可根据需求调整）
  • fillcolor：设置按钮背景色，和CSS里的background-color保持一致
  • height/width：手动设置按钮尺寸，匹配CSS中padding+内容的总大小
• 普通客户端兼容：注释外的HTML按钮保留原有的border-radius样式，确保在非Outlook客户端正常显示圆角

内容的提问来源于stack exchange，提问作者Leo A