Need to remove this mystery padding in between background and border

Question

Need help removing this mystery padding in between a border and its background. In the preview it looks fine, but it exports with that weird padding inside the frame. Here's the code:

<div class="p-2" style="width:100%; max-width: 400px; border: 26px solid transparent;
    border-image: url(https://i.imgur.com/RtR8M9i.png) 52 stretch;
    border-image-slice: 35 fill;
    image-rendering: pixelated;">
  <div class="card border-0 rounded-0 py-10 px-10" style="background:#dbaa41; color:#3e2a14;">

    <p dir="ltr">┏━───────────────╮</p>

    <p dir="ltr">┃➥ Text goes here</p>

    <p dir="ltr">┗━───────────────╯</p>
  </div>
</div>

I tried setting padding in the border to 0, class="no-margin" , change fill: and background.color:, nothing works. I'll also share how it looks in the preview and how it exports as How it looks on preview How it saves/exports

Answer 1

Please check if border-image properties are correctly applied without any extra space.

<div class="p-0" style="width:100%; max-width: 400px; border: 26px solid transparent;
    border-image: url(https://i.imgur.com/RtR8M9i.png) 52 stretch;
    border-image-slice: 35 fill;
    image-rendering: pixelated;">
    <div class="card border-0 rounded-0 p-0 m-0" style="background:#dbaa41; color:#3e2a14;">

        <p dir="ltr" style="margin: 0; padding: 0;">┏━───────────────╮</p>

        <p dir="ltr" style="margin: 0; padding: 0;">┃➥ Text goes here</p>

        <p dir="ltr" style="margin: 0; padding: 0;">┗━───────────────╯</p>
    </div>
</div>

Try this and check if the padding issue is resolved in the exported version