How to make 2 borders overlap?

I use tailwind and i need to achieve this :

So I made a border on the parent element and on both buttons (increment and decrement).

Problem : when there are 2 borders, we can see it. And the render is not like my template :

I added class -m-px but not sufficient.

Here is the playground

Here is the code :

<div class="flex flex-col gap-2 p-8">
  <div class="flex w-fit items-center rounded border border-solid border-neutral-300">
    <button type="button" class="-m-px mr-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">
      -
    </button>

    <input id="{id}" type="number" value="0" class="h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />

    <button type="button" class="-m-px ml-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">
      +
    </button>
  </div>
</div>

Thank you for your help !

You can consider using arbitary value if you want to have 1px in only one side of the div

<div class="flex flex-col gap-2 p-8">
  <div class="flex w-fit items-center rounded border border-solid border-neutral-300">
    <button type="button" class="mr-0 h-10 w-10 rounded border-r-[1px] border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">-</button>

    <input id="{id}" type="number" value="0" class="h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />

    <button type="button" class="h-10 w-10 rounded border-l-[1px] border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none">+</button>
  </div>
</div>

Edit:

Zero is placed slightly left because of the up and down arrows which will let the user to increment/decrement the value.

To remove this you need to add following code in the css file

@layer components {
  input[type="number"]::-webkit-inner-spin-button,
  input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
}

Final Output:

Tailwind-css

You can add style=border-(left/right): 1px solid #ccc; to the button style.

style="border-right: 1px solid #ccc;

<div class="flex flex-col gap-2 p-8">
  <div class="flex w-fit items-center rounded border border-solid border-neutral-300">
    <button type="button" class="-m-px mr-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none style="border-right: 1px solid #ccc;">
      -
    </button>
    <input id="{id}" type="number" value="0" class="h-10 w-16 rounded border-none text-center text-base font-semibold focus:outline-none" />

    <button type="button" class="-m-px ml-0 h-10 w-10 rounded border border-solid border-neutral-300 bg-transparent hover:cursor-pointer focus:outline-none style="border-left: 1px solid #ccc;">
      +
    </button>
  </div>
</div>