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

See original GitHub issue

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

Issue Analytics

State:
Created 6 years ago
Reactions:1
Comments:5 (2 by maintainers)

Top GitHub Comments

4reactions

PJUllrichcommented, Jun 23, 2021

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

1reaction

iRyusacommented, Jun 23, 2021

That’s a really clever solution @PJUllrich 👍

Top Results From Across the Web

css - border-radius not working - Stack Overflow

Sometimes you can apply border-radius to a wrapper container and it will work nicely. For example, I was trying to set border-radius to...

Email Editor - MJML

Create beautiful responsive email templates with the MJML Email Editor. No installation required, just give it a try online! With this online email...

border-radius - CSS: Cascading Style Sheets - MDN Web Docs

The border-radius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, ......

Border radius - Vuetify

Use border utilities to quickly style the border-radius of any element. # Usage ...

Borders · Bootstrap v5.2

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.