[Style] mj-section doesn't render border-radius properly

[jllavec]

Lib version: mrml 5.1.0

When I use node version for MJML and i apply the border-radius directly to mj-section, it automatically adds the border-collapse: separate css property to the div element generated in order to show rounded corners properly.

But when I use MRML, it doesn´t do it and it renders squared corners.

For this MJML code:

<mjml>
  <mj-body>
    <mj-section background-color="red" border-radius="8px" border="1px solid blue">
      <!-- Your columns go here -->
    </mj-section>
  </mj-body>
</mjml>

With node mjml version:

<div style="background:red;background-color:red;margin:0px auto;max-width:600px;border-radius:8px;overflow:hidden;">
      <table align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:red;background-color:red;width:100%;border-collapse:separate;">
        <tbody>
          <tr>
            <td style="border:1px solid blue;border-radius:8px;direction:ltr;font-size:0px;padding:20px 0;text-align:center;">
              <!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><![endif]-->
              <!-- Your columns go here -->
              <!--[if mso | IE]></tr></table><![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>

With MRML:

<div style="background:red;background-color:red;margin:0px auto;border-radius:8px;max-width:620px;">
  <table border="0" cellpadding="0" cellspacing="0" role="presentation" align="center"
    style="background:red;background-color:red;width:100%;border-radius:8px;">
    <tbody>
      <tr>
        <td
          style="border:1px solid blue;direction:ltr;font-size:0px;padding:0px;padding-bottom:0px;padding-left:0px;padding-right:0px;padding-top:0px;text-align:center;">
          <!--[if mso | IE]><table border="0" cellpadding="0" cellspacing="0" role="presentation"><tr><![endif]--><!--[if mso | IE]><td><![endif]-->
          <div style="height:48px;line-height:48px;">&hairsp;</div>
          <!--[if mso | IE]></td><![endif]--><!--[if mso | IE]></tr></table><![endif]-->
        </td>
      </tr>
    </tbody>
  </table>
</div>

As you can see, in output code, node version adds the border-collapse: separate to the table element when border-radius is present.