border not working properly when applying padding - css

Question

I was applying a border to this input field along with a gradient:
(https://i.stack.imgur.com/eTqQP.png)
,however because i applied some padding now it is very thick on the left side of the border when i hover the input
Here is the css code:
#input2:hover {
border:2px double transparent;
border-radius: 5px;
background-image: linear-gradient(white,white),
linear-gradient(45deg, #63589A,#5e138d);
background-origin: border-box;
background-clip: content-box,border-box;
cursor: pointer;
}
input {
padding-left: 5px;
border-radius: 5px;
border-color: rgba(237, 237, 237, 255);
}
I want the left- side to look the same as the other border-sides.
Would appreciate it if someone helped me on this!

Answer 1

Use padding-box inside the background-clip instead of content-box
input {
border: 3px solid transparent;
border-radius: 5px;
background-image:
linear-gradient(white, white),
linear-gradient(45deg, #63589A, #5e138d);
background-origin: border-box;
background-clip: padding-box, border-box;
cursor: pointer;
padding: 5px 30px;
font-size: 20px;
outline-offset: 4px;
}
<input type="text" placeholder="some text">

Answer 2

Is this what you were trying to achieve?
#input2 {
padding-left: 5px;
cursor: pointer;
font-family: monospace;
width: 200px;
height: 30px;
}
.input-container {
display: flex;
border-radius: 5px;
width: max-content;
border-color: rgba(237, 237, 237, 255);
padding: 2px;
}
.input-container:hover {
border: none;
background-image: linear-gradient(white, white), linear-gradient(45deg, #63589A, #5e138d);
background-origin: border-box;
background-clip: content-box,border-box;
}
<div class="input-container">
<input id="input2" type="text" placeholder="e.g. 1234 5678 9123 0000"/>
</div>