border-radius not working in Hubspot email template but DOES in module

JVH1 · ‎Jan 20, 2022

I have built a module which features a border with rounded corners and round top corners of the image. This previews fine in the module preview window but as soon as I place it in to a Hubspot email template just the border return to being square? (The image seems to remain rounded correctly) Why is this happening?

I placed the code in to Dreamweaver to check it over in there but it views as I expect with rounded corners.

Any advice on how to get this to work in Hubspot email templates?

Rounded edges in module builder previewSquared border edges in actual Hubspot email template?!

This is my module code:

<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="width: 100%; max-width: 600px; text-align: center;">
  <tr>
    <td><table class="mobile-stack" align="{{ module.alignment }}" border="0" cellpadding="0" cellspacing="0" role="presentation"  width="48%">
        
        <!-- Villa -->
        <tr>
          <td style="vertical-align: top; padding-top: {{ module.villa_1.padding.footer_top_padding }}px; padding-bottom: {{ module.villa_1.padding.footer_bottom_padding }}px;">
			      
            <!-- Villa container with border -->        
            <table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" >
              <tr>
                <td style="border: solid {{ module.border_colour.color }}; border-width: {{ module.border_width }}px; border-radius: {{ module.border_radius }}px;">
					<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%">
                    
                    <!-- Villa image -->
                    <tr>
                      <td align="center"><a style="color: #FFFFFF" href="{{ module.villa_1.desktop_image.link }}" target="{{ module.villa_1.desktop_image.target }}"><img style="border-width: 0px; border-top-left-radius: {{ module.border_radius }}px; border-top-right-radius: {{ module.border_radius }}px;" class="full_img" {% if module.villa_1.desktop_image.img.src %}
	        {% set sizeAttrs = 'width="{{ module.villa_1.desktop_image.img.width }}" height="{{ module.villa_1.desktop_image.img.height }}"' %}
	        {% if module.villa_1.desktop_image.img.size_type == 'auto' %}
		      {% set sizeAttrs = 'style="max-width: 100%; height: auto;"' %}
	        {% elif module.villa_1.desktop_image.img.size_type == 'auto_custom_max' %}
		      {% set sizeAttrs = 'width="{{ module.villa_1.desktop_image.img.max_width }}" height="{{ module.villa_1.desktop_image.img.max_height }}" style="max-width: 100%; height: auto;"' %}
	        {% endif %}
	        {% set loadingAttr = module.villa_1.desktop_image.img.loading != 'disabled' ? 'loading="{{ module.villa_1.desktop_image.img.loading }}"' : '' %} src="{{ module.villa_1.desktop_image.img.src }}" alt="{{ module.villa_1.desktop_image.img.alt }}" {{ loadingAttr }} {{ sizeAttrs }}/>{% endif %}</a></td>
                    </tr>
                    
					
					          <!-- Villa details 2 --> 
                    {% if module.villa_1.villa_details.show_text %}
                    <tr>
                      <td align="center" style="padding-bottom: 10px; padding-top: 30px;"><table width="90%" border="0" cellpadding="0" cellspacing="0" style="text-align: center; max-width: 90%; margin: auto;">
                          <tr>
                            <td class="titlespacing" style="max-width: 90%; font-family: 'Montserrat', Verdana, sans-serif;" >{% inline_rich_text field="text" value="{{ module.villa_1.villa_details.text }}" %}</td>
                          </tr>
                        </table></td>
                    </tr>
                    {% endif %}
                  
                    <!-- Villa CTA --> 
                    {% if module.villa_1.cta.show_button %}
                    <tr>
                      <td align="center" style="padding-bottom: 20px; padding-top: 10px;"><table width="90%" border="0" cellpadding="0" cellspacing="0" style="text-align: center; max-width: 90%; margin: auto;">
                          <tr>
                            <td align="{{ module.villa_1.cta.button_alignment }}" style="max-width: 90%; background-color: {{ module.villa_1.cta.background_colour.color }}; border-radius: 2px;" > {% cta guid="{{ module.villa_1.cta.cta }}" %} </td>
                          </tr>
                        </table></td>
                    </tr>
                    {% endif %}
                  
                  </table></td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
</table>

JVH1 · ‎Feb 2, 2022

I have solved this issue.

Thanks for your suggestions however me removing px did not work because that is not how I put it in my choices fields (right column)as in the screenshot above. Unless I had also put px in the right column choice fields this would have been a problem, like you say.

It was actually some Hubspot CSS in the template which I could only access by using the 'copy to html function' to view what was causing it to retain squared corners. I noticed when output to html there was "border-collapse:collapse !important" added to my table - removing this allowed my corners to round so...

I found this as part of the standard Hubspot template code and so used class="columnContentTable" in my table - it now works as it should.

/* ==== Column Styles ==== */

table.columnContentTable {
border-collapse:separate !important;
border-spacing:0;

JVH1 · ‎Jan 21, 2022

Hi,

Thanks for your reply and taking the time to look in to this issue!

Great suggestion, however I didn't code the "px" in to the choice fields so the px is needed there.

I added the "Overflow:hidden;" as mentioned but alas, still showing me the square corners on just the border itself.

Do you have any other suggestion?

Kind regards,

Holly

webdew · ‎Jan 24, 2022

Hi @JVH1 ,

Remove the px from here https://i.imgur.com/nNJLNQy.png and also in other places where you add , because the px dimension already come in choice field https://i.imgur.com/rxV6TI3.png , so its appear twice like border-radius:5pxpx;

Also if you are adding border-radius to <td> you should also add Overflow:hidden; property in inline style

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regard.

webdew · ‎Jan 21, 2022

Hi @JVH1 ,

Remove the px from here https://i.imgur.com/nNJLNQy.png and also in other places where you add , because the px dimension already come in choice field https://i.imgur.com/rxV6TI3.png , so its appear twice like border-radius:5pxpx;

Also if you are adding border-radius to <td> you should also add Overflow:hidden; property in inline style

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regards.

Email Marketing Tool