Del modo que lo tienes debería ser funcional así.

Salvo que tengas los estilos de bootsrap después de los que deseas aplicar de manera personalizada; es decir:

El orden de tus códigos CSS debería estar así:

    <link rel="stylesheet" href="bootstrap.css">
    <link rel="stylesheet" href="misestilos.css">

Ahora con CSS tendrías un input así:

    <input type="email" class="form-control-lg border-0" placeholder="Correo Electronico">

Posterior con CSS  modificamos su apariencia de este modo:

    .form-control-lg{
          border: 1px solid red;
          outline: none;
    }

* Usamos la *pseudoclase* `:focus` para identificar cuando la caja de texto se le ha dado click y esta disponible para escritura
* Con `outline: none;` quitamos el borde por defecto que se coloca cuando ponemos el cursor del mouse
* Con `border: 1px solid red;` solo estamos poniendo un color distinto que haga que se note el cambio

**Ejemplo completo**

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->

        <!DOCTYPE html>
        <html>
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width">
          <link rel="stylesheet" href="">
          <title>Ejemplo</title>
          <style>
            .form-control-lg{
              border: solid 1px blue;
            }
            .form-control-lg:focus{
              border: 1px solid red;
              outline: none;
            }
          </style>
        </head>
        <body>
        <input type="text" class="form-control-lg">
        </body>
        </html>

<!-- end snippet -->