Line appears with overflow: hidden and border-radius

I'm experiencing an issue where a thin black line appears at the border of a child element when using CSS overflow: hidden combined with border-radius.
Any solutions or insights would be greatly appreciated.

<a class="button">
  <div class="inner">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="36"
      height="36"
      viewBox="0 0 36 36"
      fill="none"
      class="deco-left"
    >
      <path
        d="M3.14722e-06 36L0 3.14722e-06L36 0L3.14722e-06 36Z"
        fill="#8E66CC"></path>
      <path
        d="M3.14722e-06 33L2.62267e-07 2.88495e-06L33 0L3.14722e-06 33Z"
        fill="#FF6D8F"></path>
    </svg>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="36"
      height="36"
      viewBox="0 0 36 36"
      fill="none"
      class="deco-right"
    >
      <path d="M36 0V36H0L36 0Z" fill="#8E66CC"></path>
      <path d="M36 3V36H3L36 3Z" fill="#A1E986"></path>
    </svg>
    <span class="text">Button</span>
  </div>
</a>

<style lang="scss">
  .button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 2px 8px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--text-white);
    text-decoration: none;
    background: linear-gradient(90deg, #ffe26d 0%, #52ff58 50%, #86b6e9 100%);
    border-radius: 999px;
    transition:
      background-color 0.2s ease-out,
      color 0.2s ease-out,
      border-color 0.2s ease-out;

    & .inner {
      position: relative;
      display: flex;
      gap: 8px;
      align-items: center;
      padding: 20px 32px;
      overflow: hidden;
      background-color: #252525;
      border-radius: 120px;

      & .deco-left {
        position: absolute;
        top: 0;
     L   left: 0;
      }

      & .deco-right {
        position: absolute;
        right: 0;
        bottom: 0;
      }
    }
  }

  .text {
    display: flex;
    flex-wrap: wrap;
  }
</style>