Closed as not planned
Description
Describe the Bug
Recommended approach: when there is a border, instead of using a border, wrap a table inside another table with padding equivalent to the border-width and use bg-color as border-color. This works flawless.
Example of generated code (wrong):
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="max-width:100%;margin-top:16px;margin-bottom:16px"
>
<tbody>
<tr style="width:100%">
<td style="padding-right:16px;padding-left:16px">
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tbody style="width:100%">
<tr style="width:100%">
<td>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="background-color:transparent;border-radius:8px;border:4px solid #00ff4f;margin:0"
>
<tbody>
<tr>
<td style="padding:0">
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tbody style="width:100%">
<tr style="width:100%">
<td>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="background-color:#f40707;border-radius:8px;margin:0"
>
<tbody>
<tr>
<td
style="padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px"
>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tbody style="width:100%">
<tr style="width:100%">
<td align="left">
<p
style="font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Arial;font-weight:400;color:#1A1A1A;margin:0 0 0px 0;padding-left:0;padding-right:0;margin-top:0;margin-right:0;margin-bottom:0px;margin-left:0"
>
bern
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>Example of fully working code (react email doesn't generate this):
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="background-color:#00ff4f;border-radius:8px;margin:0"
>
<tbody>
<tr>
<td style="padding:4px">
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
style="background-color:#f40707;border-radius:4px;margin:0"
>
<tbody>
<tr>
<td
style="padding-top:12px;padding-right:12px;padding-bottom:12px;padding-left:12px"
>
<table
align="center"
width="100%"
border="0"
cellpadding="0"
cellspacing="0"
role="presentation"
>
<tbody style="width:100%">
<tr style="width:100%">
<td align="left">
<p
style="font-size:16px;line-height:24px;font-family:Arial;font-weight:400;color:#1A1A1A;margin:0;"
>
bern
</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>Simple react email code:
<Container
style={{
maxWidth: "100%",
marginTop,
marginBottom,
paddingLeft: marginLeft,
paddingRight: marginRight,
}}
>
<Row>
<Column style={borderStyles}>
<Section
style={{
backgroundColor,
borderRadius: innerBorderRadius,
margin: 0,
...contentPadding,
}}
>
<Row>
bern
</Column>
</Row>
</Section>
</Column>
</Row>
</Container>To Reproduce
Try exporting code with borderRadius + borderWidth
Expected Behavior
border should have radius in HTML
What's your node version? (if relevant)
No response