How to add border to focus css

I would like to add styling input text box that has a red border when clicked and no border when you click away. I have tried styling input:active but the problem is that when you click away, the red border is still there. Rather than input:active I wan't to manipulate the input:focus to have a red border like so

 textarea:focus, input:focus{
        outline: none; 
        border: 1px solid red;
  }

is there a way to do this?