CSS outline best practices
Indeed. An outline is around the rectangular area on the outside of the border. It doesn't take rounded corners into account.
There's nothing wrong with disabling the outline, just make sure you add some other accessibility feature for people using the keyboard, for instance, change the color of your background on focus:
div {
margin: 64px;
}
input {
font-size: 20px;
border-radius: 16px;
border: 2px solid #CCC;
padding: 2px 12px;
outline: 0;
}
button {
font-size: 20px;
border-radius: 32px;
text-transform: uppercase;
color: #FFF;
border: 2px solid #CCC;
background: #CCC;
padding: 6px 3px;
cursor: pointer;
}
input:focus {
border-color: #999;
}<div>
<input type="text" placemark="Search query..."/>
<button>Go</button>
</div>