Changing button border in join

[akshaybabloo]

Is there a way to change the border of the button when used with join. Here is the code

<div class="join w-full">
  <input
    :value="totpSecret"
    type="text"
    class="input join-item flex-1"
    readonly
  />
  <button
    @click="copyToClipboard(totpSecret || '')"
    class="btn join-item btn-outline" 
    title="Copy to clipboard"
  >
    <span class="material-symbols-outlined text-3xl">content_copy</span>
  </button>
</div>

With an output of (screenshot below)

I feel the border color doesn't match the border of the input field. I tried setting the border but that shows out of the button (around it). Any help is appreciated.

[pdanpdan]

Why not set the border color as you wish?
https://play.tailwindcss.com/JNVxk7oqzD