CTA border doesn't render properly with Outlook

Question

I need to create an email with 2 CTA buttons that stay side by side.

The first CTA has black background and the second one has white background. Both buttons have rounded corners (border-radius 6px), but the white one also has a solid border (1px).

This is how they should look:

The block looks nice with all email clients except for Outlook. These are the problems that I'm facing:

1. The 1px solid border has square corners and there's no space between the text and the border:

2. In Dark Mode, Office inverts the background colors, but it doesn’t invert the fill color in the VML.

Initially I thought that I had found a fix for this in the section "Support and hacks for Dark Mode" of this article https://www.litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design. However, that solution allows to fix the whole background color of the button, but then the text is invisible because we can’t control the font color in Dark Mode and I ended up with a white text over a white background.

Can anyone help me?

Here's the full code:

<table style="border-collapse: separate;" border="0" cellspacing="0" cellpadding="0" role="presentation">
    <tr>
        <td>
            <span
                style="font-family: HelveticaNeueLTStd, Helvetica, Verdana, &quot;sans-serif&quot;; font-size: 13px; margin: 0;padding: 0;margin-top: 0;">
                <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" rel="noopener" target="_blank" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" stroke="f" fillcolor="#000000">
<w:anchorlock/>
<center>
<![endif]-->
                <a target="_blank" href=""
                    style="background-color:#000000;border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px;color:#ffffff;display:inline-block;font-size: 13px; font-family: HelveticaNeueLTStd, Helvetica, Verdana, &quot;sans-serif&quot;;font-weight:bold; line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Button 1</a>
                <!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
            </span>
        </td>
        <td>
            &nbsp;&nbsp;&nbsp;&nbsp;
        </td>
        <td>
            <span
                style="font-family: HelveticaNeueLTStd, Helvetica, Verdana, &quot;sans-serif&quot;; font-size: 13px; margin: 0;padding: 0;margin-top: 0;">
                <!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" rel="noopener" target="_blank" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="10%" stroke="f" fillcolor="#ffffff">
<w:anchorlock/>
<center>
<![endif]-->
                <a target="_blank" href=""
                    style="background-color:#ffffff;border-radius:6px;border: 1px solid #ABABAB; color:#000000;display:inline-block;font-size: 13px; font-family: HelveticaNeueLTStd, Helvetica, Verdana, &quot;sans-serif&quot;;font-weight:bold; line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Button 2</a>
                <!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
            </span>
        </td>
    </tr>
</table>