outline.css

body {
  margin: 0;
  font-family: sans-serif;
}
/* 
El outline no ocupa espacio, tiene una utilidad visual (Transiciones, Cambios de estado, Seleccionar elementos)

outline-offset -> Cuanto se va a separar del elemento
outline-color -> Color del outline
outline-style -> Estilo del outline
outline-width -> Ancho del outline

*/
body {
  margin: 0;
  font-family: sans-serif;
  background-color: #ccc;
}
input {
  margin: 50px;
  border: none;
  border-top: 3px solid #000;
  outline: 3px solid #00f;
  outline-offset: 5px;
  padding: 6px;
  transition: outline 0.2s, outline-offset 0.2s;
}

input:focus {
  border-color: #00f;
  color: #00f;
}

/* Quitar outline en los input */
input:focus-visible {
  outline: none;
}