Having problem with borders on segmented button using tailwind

Question

Trying to create segmented button, but having problem with borders. I want to have 1px border everywhere including between buttons

Structure for 2nd variant (buttons are rendered dynamically)

<div class="divide-x">
 <button class="border-y first:border-l last:border-r">
</div>

I have tried multiple ways of borders

• 1st borders on each button but than I have 2px between buttons, and with tailwind I can specify only first/last button to remove border between buttons (I dont want to install aditional libraries)
• 2nd divide-x on parent + border-y + on child(button) first:border-r and last:border-r for some reason last:border-r doesnt apply and creates something like this

any suggestions?

Answer 1

like this?

<div class="divide-x divide-black border border-black rounded-full">
    <button class="py-2 px-8">hello</button>
    <button class="py-2 px-8">hello</button>
    <button class="py-2 px-8">hello</button>
    <button class="py-2 px-8">hello</button>
</div>

or like this?

<div class="flex">
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
    <button class="py-2 px-8 border-y border-l first:rounded-l-full last:border-r last:rounded-r-full border-black">hello</button>
</div>