Html Question posted in
Some basic documentation can be found here.

Html – How to remove tiny outlines on corners?

I am working on an input field with a gradient border on hover and focus. I came up with this snippet that technically works:

<div class="rounded-lg bg-gradient-to-tr from-yellow-600 via-red-600 to-purple-600">
  <input class="rounded-lg border border-gray-300 bg-clip-padding px-4 py-2 transition duration-200 hover:border-transparent focus:border-transparent focus:outline-none" />
</div>

https://play.tailwindcss.com/g4r07nPkLe

However, it produces tiny halo-like double borders on every corner. Please take a look at the attached image:

enter image description here

Through trial and error, I discovered that the background gradient image causes it. If it is removed, the tiny halos go away. It is not there when hovered or focused, either. Is there any way to fix it?

Tags:

2

Answers


  1. 0

    It is necessary to use an additional element, or a pseudo-element. For example:

    <div class="flex h-full flex-col items-center justify-center">
    <div class="relative group rounded-lg">
        <input class="rounded-lg border border-gray-300 bg-clip-padding px-4 py-2 transition duration-200 hover:border-transparent focus:border-transparent focus:outline-none relative z-10" />
        <div class="absolute inset-0 rounded-lg bg-gradient-to-tr from-yellow-600 via-red-600 to-purple-600 opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-within:opacity-100"></div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    You use like this→

    <div class= "rounded-lg bg-gradient- 
to-tr from-yellow-600 via-red-600 
to-purple-600 p-2">
<input class= "rounded-lg border 
 border-gray-300 bg-clip-padding
 px-4 py-2 transition duration-200 
 hover:border-transparent 
 focus:border-transparent 
 focus:outline-none focus:ring-0"/>
  </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search