topic Re: Placement of code within email design manager module in CMS Development

Placement of code within email design manager module

HSchleicher — Fri, 01 Aug 2025 19:38:12 GMT

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:

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

<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
  1. Implement the hybrid VML + HTML snippet above for your CTA.
  2. Send a test email both to your Outlook client and your coworker’s Outlook instance.
  3. 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.

Re: Placement of code within email design manager module

Victor_Becerra — Fri, 01 Aug 2025 21:00:24 GMT

Hi @HSchleicher
Thank you for reaching out to the Community!
I'd like to invite some community members who are subject matter experts to join this conversation.
@Indra @alyssamwilie @HubDoPete - Would you be able to share any insights on this? Your expertise would be greatly appreciated.
Best,
Victor

Re: Placement of code within email design manager module

FaramarKolivand — Sat, 02 Aug 2025 20:03:59 GMT

Would something like this work? https://codepen.io/wpembraced/pen/ByoWYVJ

Re: Placement of code within email design manager module

GRajput — Mon, 04 Aug 2025 09:12:02 GMT

Hi @HSchleicher

HubSpot’s drag-and-drop email editor has some limitations. For example, when we use a rounded CTA button, it doesn’t always appear rounded in certain versions of Outlook. Unfortunately, this can’t be fixed using the drag-and-drop editor. If we switch to a custom-coded email template, we can apply a specific hack that makes the button appear correctly in Outlook. But since the drag-and-drop editor doesn’t let us add that fix in the right place, we’re unable to resolve the issue there.

I hope this will help you out. Please mark it as Solution Accepted and upvote to help another Community member.

Thanks!

Re: Placement of code within email design manager module

Anton — Mon, 04 Aug 2025 10:58:19 GMT

Hey @HSchleicher,

it's a shame, I know... One of many reasons, why Outlook is getting so much negativity from the devs... You got to implement MSO, VMLs etc.... Just a pure headache tbh. 🙂

Unless you want to deal with A LOT of code, the one thing that I always recommend to anyone who wants to have something rounded like buttons in emails:

Create a PNG of the element, upload it, use it as a button/CTA

Yes this adds a few more steps to the process, but it's 99% bulletproof (unless the reciepient blocks images).

Hope this helps

best,

Anton

Re: Placement of code within email design manager module

HSchleicher — Mon, 04 Aug 2025 15:46:13 GMT

Thank you @FaramarKolivand! Your code appears to fix the rounded corners issue. However, I cannot get the drag-and-drop editor components to work with it. When I try to change the link URL, the button text, or the styling, it does not apply. See my screenshot attached where I try to make changes on the left side, but they do not appear on the button on the right side. Any idea how to fix that?

Re: Placement of code within email design manager module

HSchleicher — Mon, 04 Aug 2025 15:59:44 GMT

Thank you for the reply. Unfortunately, I don't want to have to create a custom image for every button in every email. And many versions of Outlook could block the images by default, so then they may not be visible at all.

Re: Placement of code within email design manager module

FaramarKolivand — Mon, 04 Aug 2025 16:31:36 GMT

Hi @HSchleicher , the code was only for testing and demo purposes. With this, you can create your own custom module/button with styling and HubL code and add it to your drag and drop toolbox in your screenshot. There should be documentations for that.