outline on only one border

Question

How to apply an inset border into an HTML element, but just only on one side of it. Until now, I\'ve been using an image to do that (GIF/PNG) that I would

Answer 1

I like to give my input field a border, remove the outline on focus, and "outline" the border instead:

input {
  border: 1px solid grey;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }

You can also do it with a transparent border:

input {
  border: 1px solid transparent;

  &:focus {
    outline: none;
    border-left: 1px solid violet;
  }
 }