Mjml: add border and border-radius

Created on 14 Mar 2016  Â·  8Comments  Â·  Source: mjmlio/mjml

is possible to add border-radius to sections and to body?

Feature request

Most helpful comment

Border radius is a pretty safe progressive enhancement to implement, support-wise. The fallback would simply be square corners for the email clients that don't support it. Those that do, get the nice progressive enhancement.

All 8 comments

Hi!

A PR is open at #103 , but we need to finish the 1.3 before merging it. Border-radius has a terrible support on outlook, so I don't think we can add it

Border radius is a pretty safe progressive enhancement to implement, support-wise. The fallback would simply be square corners for the email clients that don't support it. Those that do, get the nice progressive enhancement.

@CourtFantinato well said. Was this ever resolved?

I'm currently looking to implement a border-radius for images...

@iRyusa What do you mean by

Border-radius has a terrible support on outlook

Does it break anything?

PR #103 is for border-width and color I think. Border-radius have no problem

Quick update here, closing this one because of #92 duplicate. More details soon

When I add a border on a mj-section element like:

<!-- Footer -->
<mj-section
  padding="15px 0"
  border="1px solid #eeeeee"
  border-radius="0 3px 3px 3px"
>
  <!-- -->
</mj-section>

I have the border-radius on the div and the table, and the border on the td:

<table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;border-radius:0 3px 3px 3px;">
  <tbody>
    <tr>
      <td style="border:1px solid #eeeeee;direction:ltr;font-size:0px;padding:15px 0;text-align:center;vertical-align:top;">
        <!--[if mso | IE]>
        <table role="presentation" border="0" cellpadding="0" cellspacing="0">
          <tr>
          </tr>
        </table>
        <![endif]-->
      </td>
    </tr>
  </tbody>
</table>

And if I put manually the 2 properties in the same place it has no effect because of border-collapse: collapse

Yep and we can't do anything here about it. Border-collapse is needed for
some weird outlook behavior. If you want you can use mj-style with inline
to remove it, but I wouldn't recommend it

On Fri, Jul 6, 2018 at 12:59 PM Kévin Berthommier notifications@github.com
wrote:

When I add a border on a mj-section element like:


padding="15px 0"
border="1px solid #eeeeee"
border-radius="0 3px 3px 3px"
>

I have the border-radius on the div and the table, and the border on the
td:

And if I put manually the 2 properties in the same place it has no effect
because of border-collapse: collapse

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/mjmlio/mjml/issues/136#issuecomment-403001933, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAizzeaP4hDQCHBbMB618mCqpe4P2qizks5uD0MsgaJpZM4HwKK6
.

--
Cordialement,
Maxime BRAZEILLES

Was this page helpful?
0 / 5 - 0 ratings

Related issues

karanmartian picture karanmartian  Â·  3Comments

csmcanarney picture csmcanarney  Â·  3Comments

AustinTruex68 picture AustinTruex68  Â·  4Comments

sinsunsan picture sinsunsan  Â·  4Comments

valstu picture valstu  Â·  3Comments