Whitespace in wrapped form element

Question

I'm creating a form with gradient borders. To protect against the borders being removed by the browser on autocomplete I've had to wrap all of the elements in a DIV containing their border. box-sizing is used to include the padding in the element size because there's a textarea too. My issue is now with the submit button.

.input-container {
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border: solid 5px transparent;
    border-radius: 30px;
    margin-bottom: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    padding: 15px;
    display: inline-block;
    border: none;
    outline: none;
    border-radius: 30px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    background: #FFFFFF;
}

input[type=submit]:hover {
    background-image: linear-gradient(-45deg, #006699, #9900CC);
    color: #FFFFFF;
}

<div class="input-container">
<input type="submit" name="submit" id="submit" value="Submit" required>
</div>

When a user hovers over the button there's an issue where there's a slight edge. For ease having the border there all of the time makes more sense. Having the border there always means the button only needs to fill rather than having no border and being entirely fill (it causes size to momentarily change)

Any ideas for how to get rid of this small outline on the edges would be appreciated so that the button looks truly filled.

You can see the outline appear occasionally below.

And static here

Answer 1

Is it ok?

.input-container:hover {
border: none;

}

.input-container {
    background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    border-radius: 30px;
    margin-bottom: 10px;
    overflow: hidden;
    border: solid 5px transparent;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    padding: 15px;
    display: inline-block;
    border: none;
    outline: none;
    border-radius: 30px;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    background: #FFFFFF;
}

.input-container:hover input[type=submit] {
    background-image: linear-gradient(-45deg, #006699, #9900CC);
    color: #FFFFFF;
padding:30px 15px;
    padding: 20px 15px;
}

  <div class="input-container">
    <input type="submit" name="submit" id="submit" value="Submit" required>
    </div>

Answer 2

As we can see. the border causes this part background-image: linear-gradient(white, white) in .input-container. So lets manipulate it. Added an additional class to parent container .submit-container.

.input-container {
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: solid 5px transparent;
  border-radius: 30px;
  margin-bottom: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

.submit-container:hover {
  background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), radial-gradient(circle at top right, #006699, #9900CC);
}

input[type=submit] {
  width: 100%;
  padding: 15px;
  display: inline-block;
  border: none;
  outline: none;
  border-radius: 30px;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  background: none;
}

.submit-container:hover input[type=submit] {
  color: #FFFFFF;
}

<div class="input-container submit-container">
  <input type="submit" name="submit" id="submit" value="Submit" required>
</div>

Answer 3

This white border comes because of padding of outer div. You can do different way like removing div.

input[type=submit] {
  width: 100%;
  padding: 15px;
  display: inline-block;
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  background-image: linear-gradient(white, white), radial-gradient(circle at top right, #006699, #9900CC);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border: solid 5px transparent;
  border-radius: 30px;
  margin-bottom: 10px;
  overflow: hidden;
  box-sizing: border-box;
}

input[type=submit]:hover {
  background-image: linear-gradient(-45deg, #006699, #9900CC);
  color: #FFFFFF;
  padding: 18px;
  border: solid 5px transparent;
}

<input type="submit" name="submit" id="submit" value="Submit" required>