Mjml: Can't use border-radius with solid borders on mj-column

[zzorba]

I'm trying to combine border-radius with a solid border, but it seems like these two features are mutually exclusive. I can get the background to respect the radius, but the solid border is always squared.

<mj-wrapper background-size="960px" background-repeat="no-repeat" background-color="#FF0000">
      <mj-column border="1px solid #000000" border-radius="4px" width="512px" background-color="#FFFFFF">
        <mj-text line-height="1.52" font-size="21px">
                 You received this email because of a signup from <b>{{USER_EMAIL}}</b> to try Scroll in beta.
            </mj-text>
      </mj-column>
</mj-wrapper>

Expected behavior:
The solid border is rendered rounded, or documentation points out this is intentionally not supported.

Observed behavior:
The rounded border only changes the background, not the solid border.

Screenshots and GIFs

MJML version:
3.3.5

Email clients the bug is seen on:

Debugging emails in web browser

[ngarnier]

Hey @zzorba, unfortunately, because how border-collapse work, it's indeed not possible to get functional borders with rounded squares.

2 options here:

• trick it by using the section to behave as the border: https://mjml.io/try-it-live/SkUFiuUZM. It's a quick POC, make sure to test it (and keep in mind that Outlook doesn't support rounded angles)
• use an image at the top of your section that is the same color as your section and has rounded square (with a transparent background)

I'm closing because there's not much more we can do unfortunately! Feel free to answer still if the workarounds are not clear to you

[zzorba]

Thanks for the tip @ngarnier very helpful!

[PJUllrich]

I came across the same problem today and would like to share another option.
However, I haven't tested this solution across different email clients, but maybe it helps you further regardless.

The trick is to give your mj-column a background-color of your preferred border color and then to give it a inner-background-color of your preferred background color. An example:

  <mj-column
   <!-- Define the border thickness -->
    padding="2px"
    <!-- Give your entire element the color of your border -->
    background-color="#e5e5e5"
    <!-- Override the background with your preferred background color -->
    inner-background-color="#fff"
    <!-- Define your border-radius. Note that the outer radius needs to be slightly larger than the inner one. -->
    <!-- Otherwise, you have weird "thick" edges. -->
    border-radius="7px"
    inner-border-radius="5px"
  >

[iRyusa]

That's a really clever solution @PJUllrich 👍

[PJUllrich]

Haha, thank you! I'm glad you find it useful. I'm yet to test it on real-world email clients, but will let you know if I find any problems with this solution.