Border not taking Radius

How can I make it look like the attached design?

<tr bgcolor="#f5f5f5"><td align="center"><table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr>
    <td class="cta" align="center" style="border-radius:45px; border:5px solid #000002; background:#d62828; padding:15px 75px; font-family:'Roboto',Helvetica,Arial,sans-serif; font-size:16px; line-height:24px; color:#ffffff; font-weight:700; ">
        <a href="https://www.google.com" target="_blank" style="color:#ffffff; text-decoration:none; display:block; ">
            Button
        </a>
    </td>
</tr></table></td></tr>

<tr bgcolor="#f5f5f5"><td align="center"><table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"><tr>
    <td class="cta" align="center" style="border-radius:45px; border:5px solid #000002; background:#d62828; padding:15px 75px; font-family:'Roboto',Helvetica,Arial,sans-serif; font-size:16px; line-height:24px; color:#ffffff; font-weight:700; ">
        <a href="https://www.google.com" target="_blank" style="color:#ffffff; text-decoration:none; display:block; ">
            Button
        </a>
    </td>
</tr></table></td></tr>

PS: Sorry for the ugly table based code, I need it mainly for Email Newsletter.

3 Replies

Jochem•3y ago

stick the border and border-radius on the A tag

iLoveCoffeeOP•3y ago

Thanks, but any idea why it's not working on td tag?

Jochem•3y ago

off the top of my head, I'd say you can't put a radius on a table cell ah, the MDN article says this:

Applies to: all elements; but User Agents are not required to apply to table and inline-table elements when border-collapse is collapse. The behavior on internal table elements is undefined for the moment.. It also applies to ::first-letter.

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

Gaming

Programming

Border not taking Radius

Did you find this page helpful?