Input должен обводиться границей если не удовлетворяет атрибуты валидации

У меня есть разметка формы. Там есть инпут с userName. Как с помощью css стилей (при этом ничего не меняя в самой разметке) чтобы при загрузке страницы этот инпут был уже обведен красной границей пока пользователь не ввел что-нибудь?

Пробовал

#userName:valid {
    border: 3px solid red;
  }

Но тогда если пользователь что-то введет, то граница останется. А нужно чтобы пропадала.

<main class="page">
      <form class="login-form">
        <div class="form-control">
          <label class="form-label" for="userName">Full Name</label>
          <input class="form-input" type="text" id="userName" name="userName" />
        </div>
        <div class="form-control">
          <label class="form-label" for="password">Password</label>
          <input class="form-input" type="password" id="password" name="password" required />
        </div>
        <button class="submit-button" type="submit">Submit</button>
      </form>
    </main>