Mjml: mj-image border-radius does not work

[mattems]

To help us help you, provide as much information as you can. You'll find below a template you can use to submit your issue, but feel free to remove any part that wouldn't be relevant here.

adding border radius to an image does not yield a radius.

Reproduction Steps:

1. add mj-image
2. add border-radius property

Expected behavior:

Should see a border radius applied to the image

Observed behavior:

No border radius

<mj-section padding="0px 20px 20px 20px">

                <mj-column>

                    <mj-image src="/images/avatar.jpg" href="https://google.com" width="100px" height="100px" border-radius="1000px" />

                    <mj-text font-size="15px" align="center" line-height="26px" padding-bottom="0px">
                        <p>Hi there,</p>
                        <p>This is an example of some text</p>
                    </mj-text>


                </mj-column>

            </mj-section>

MJML version:

4.0.2

[kevingermain]

Exactly the same for me... I hope the team can release it soon :)

[mattems]

The way i got around it temporarily (untested though) is to add the following:

<mj-style inline="inline">

            .rounded img { border-radius: 1000px; }

        </mj-style>

<mj-image src="" href="" css-class="rounded" width="100px" height="100px" border-radius="1000px" border="4px solid #F3F5F7" />

[kevingermain]

I see, nice but I'm building an email template editor, so it's not so convenient :D

[10kc-zack]

It looks like border-radius was removed from getStyles for the img tag in mj-images. See https://github.com/mjmlio/mjml/blob/master/packages/mjml-image/src/index.js#L50.

[mattems]

@10kc-zack i added this locally and it worked for me: No idea if this is the way it should be done though.

return {
      img: {
        border: this.getAttribute('border'),
        'border-radius': this.getAttribute('border-radius'),
        display: 'block',
        outline: 'none',
        'text-decoration': 'none',
        'min-width': fullWidth ? '100%' : null,
        width: fullWidth ? `${parsedWidth}${unit}` : '100%',
        'max-width': fullWidth ? '100%' : null,
      },
      td: {
        width: fullWidth ? null : `${parsedWidth}${unit}`,
      },
      table: {
        'min-width': fullWidth ? '100%' : null,
        'max-width': fullWidth ? '100%' : null,
        width: fullWidth ? `${parsedWidth}${unit}` : null,
        'border-collapse': 'collapse',
        'border-spacing': '0px',
      },
    }
  }

[mattems]

@kevingermain not ideal at all

[iRyusa]

HI,

It should be patched this week, we'll do a small 4.0.3.