zalify / easy-email-editor

Easy Email Editor is a feature-rich, top open-source SaaS email editor based on React and MJML.
https://email.maocanhua.cn/
MIT License
1.64k stars 333 forks source link

Border radius does not work as expected #323

Closed applibs closed 1 year ago

applibs commented 1 year ago

I have defined button with border radius but in email clients I see it without border radius. Why? I see that its not soo easy and I am not sure if your button component dooing it well. I found some articles which explain the problem. https://kontent.ai/blog/emails-outlook-containers-rounded-courners/ https://kontent.ai/blog/emails-rounded-buttons-with-shadow-outlook/ https://www.caniemail.com/features/css-border-radius/ Can you fix it please?

<mj-section padding="0px" text-align="left">
    <mj-column>
        <mj-button align="center" background-color="#007647" color="white" font-weight="normal" border-radius="20px" padding="10px 25px 10px 25px" inner-padding="8px 12px 8px 12px" line-height="19px" target="_blank" vertical-align="middle" border="1px solid #007647" text-align="center" href="#" font-size="14px" font-family="Roboto, sans-serif">VISIT</mj-button>
    </mj-column>
</mj-section>

button

m-Ryan commented 1 year ago

It should be noted that easy-email will eventually be converted into mjml code. So you need to provide json or mjml code. In addition, the border-radius of section/wrapper/column is actually background-border-radius

m-Ryan commented 1 year ago

In your case, it should be caused by invalid href. You can modify it to a valid href to see. For example href="https://email.maocanhua.cn"

applibs commented 1 year ago

I used many times source code from demo like this: https://email.maocanhua.cn/editor?id=618&userId=77 and result in my email client is not bordered with radius.

not-border-radius

m-Ryan commented 1 year ago

Have you solved your case? If not, it is recommended to raise an issue at MJML. Easy-email only converts JSON to MJML.

applibs commented 1 year ago

NOt solved.

applibs commented 1 year ago

It works. Was my mistake.