bug: nested different types of `join` conflict with one another

[tronikelis]

What version of daisyUI are you using?

4.7.2

Which browsers are you seeing the problem on?

Chrome, Firefox

Reproduction URL

https://play.tailwindcss.com/tRuVSiXFZv

Describe your issue

Horizontally joined buttons' border radius inside vertically joined items conflict

<div class="join join-vertical w-full">
  <div class="collapse join-item collapse-arrow border border-base-300">
    <input type="radio" name="my-accordion-4" checked="checked" />
    <div class="collapse-title text-xl font-medium">Click to open this one and close others</div>
    <div class="collapse-content">
      <p>hello</p>

      <div class="join join-horizontal">
        <button class="btn join-item">Button</button>
        <button class="btn join-item">Button</button>
        <button class="btn join-item">Button</button>
        <button class="btn join-item">Button</button>
        <button class="btn join-item">Button</button>
        <button class="btn join-item">Button</button>
      </div>
    </div>
  </div>

[github-actions[bot]]

Thank you @Tronikelis for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

duplicate of #2413