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
