Thread by Heather Schleicher (2 replies) | Slack Archive

Thread Discussion

Started by Heather Schleicher • Aug 1, 2025 7:31 PM

Total Replies

Participants

Activity

Quiet

— No recent activity

Duration

7:31 PM

Aug 1

Original Message

Thread starter

Heather Schleicher7:31 PM

Hi, I am hoping someone here can help me with modifying my hubspot email module. I am using the default drag & drop CTA button module. However, my team discovered an issue where the rounded corners of the buttons do not appear in certain versions of Outlook. To fix this, I went to chatgpt and it is guiding me to use a VML-based button as a workaround for all Outlook versions. Below is the response I got from chatgpt.

Now in Hubspot, I located where the interactive button module is, and I have cloned it to make a new version of it. But I don't know how to incorporate the chatgpt code into it. Can anyone help me with where to place it? Thanks in advance!!

Here's Chat GPT response:

If your CTA buttons show rounded corners in your Outlook desktop but appear square in your coworker’s Outlook Enterprise installation, it’s almost certainly due to Outlook not supporting border-radius in HTML email unless you implement a VML workaround. That means:

❗ Why the discrepancy?
Outlook on Windows (desktop/enterprise) uses Microsoft Word as its rendering engine, and Word-based email rendering does not support CSS3 features like border-radius (Stack Overflow, Microsoft Q&A). So even if you set border-radius: 5px; inline, Outlook will simply ignore it.
Bulletproof buttons using standard <a> tags with border-radius work in many clients—but Outlook Windows will show them with square corners by default.
Some appearances of rounded corners in Outlook can occur if Outlook is running under Windows 11 or a specific “new Office UI” mode—but that isn’t the norm in enterprise Outlook installations, which default to square corners (Email Technica).

✅ How to ensure rounded corners in all Outlook clients
You’ll need to use a VML-based button inside Outlook-specific conditional comments, paired with a standard HTML/CSS fallback for other clients:

<!-- Outlook (MSO) fallback with VML -->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas‑microsoft‑com:vml"
    href="https://example.com"
    style="height:44px;v-text-anchor:middle;width:200px;"
    arcsize="10%" stroke="f" fillcolor="#0078D4">
  <w:anchorlock/>
  <center style="color:#fff;font-family:Arial, sans-serif;font-size:16px;">
    Click Me
  </center>
</v:roundrect>
<![endif]-->

<!--[if !mso]><!-- -->
<a href="https://example.com" style="
    display:inline-block;
    background:#0078D4;
    color:#fff;
    font-family:Arial,sans-serif;
    font-size:16px;
    line-height:44px;
    text-align:center;
    text-decoration:none;
    padding:0 20px;
    border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;">
  Click Me
</a>
<!--<![endif]-->

<v:roundrect> draws the rounded rectangle in Outlook (MSO).
The arcsize percentage sets the curvature.
The fallback <a> tag with inline border-radius works in other email clients that support it (Campaign Refinery, Erkan Altınörs).

💡 Additional considerations

Inline CSS only—Outlook strips out external or embedded styles.
Table-based layout around buttons improves spacing and padding consistency.
Avoid conflicting VML: For instance, if you're using a VML background image for a section in your email template (as with some builders like Knak), that may disable VML for buttons—leading Outlook to render square corners (Reddit, Reddit, Knak Help Center).
Test across Outlook versions—Outlook 2007, 2010, 2013, 2016, 2019, and desktop Office365/FTE use this same rendering engine; only Mac, web, or Android/iOS differ.

🧪 Testing a fix

Implement the hybrid VML + HTML snippet above for your CTA.
Send a test email both to your Outlook client and your coworker’s Outlook instance.
Confirm that both now display rounded corners and consistent styling.

📋 Summary table
Email ClientRounded Corners SupportedHow It’s AchievedOutlook Windows (enterprise/desktop)❌ CSS border-radius unsupportedUse VML (<v:roundrect>) within conditional commentsOther email clients (Gmail, Apple Mail, Outlook Web, mobile)✅ Regular CSS worksInline <a> tag styled with border-radius
In short

Outlook on Windows does not support CSS border-radius.
The fix: use VML inside  for rounded corners, plus a standard styled link for other clients.
Rebuild your CTA button using that hybrid approach and test on both machines. You'll get consistent rounded corners everywhere.

Replies

2 messages in thread

Mitesh PadariyaReply 1Aug 2, 2025 1:35 AM

Sent a DM.

Courtney FantinatoReply 2Aug 6, 2025 12:58 PM

You’ll want to test that clicks are actually captured. I don’t know about HubSpot but most ESPs cannot capture clicks from VML buttons as they are not...