Tailwind code hover:border from its docs doesnt work for me

Question

My tailwind code behaves really weird. I have a div as a button and I want there an expanding border on hover. My first idea was something like hover:border-2. That doesn't work so I visited tailwind docs to figure it out. Then I put their classes from there border-2 hover:border-t-4 to mine button like this: <div class="inline-block bg-green-500 p-2 rounded-2xl border-2 hover:border-t-4">Register</div> and the button doesn't respond for hover. When I put this line to the Tailwind playground, surprisingly code works there. Does anyone have an idea what I am doing wrong there? Cheers

<template>
  <h1 class="text-2xl font-semibold">Register to use our app fully!</h1>
  <div class="login">
    <form class="bg-red-400 p-2 max-w-2xl mx-auto">
      <div class="flex flex-col items-center">

          <input type="text" id="name" placeholder="Nickname" class="m-2 p-1"/>

          <input type="text" id="name" placeholder="Password" class="m-2 p-1"/>

          <input type="number" id="name" placeholder="Age" class="m-2 p-1"/>

        <div class="p-2">
          <label for="name">I agree with licensing agreements: </label>
          <input type="checkbox" id="name" />
        </div>
      </div>
        <div class="inline-block bg-green-500 p-2 rounded-2xl border-2 hover:border-t-4">Register</div>
    </form>
  </div>
</template>