Why can't the color of my border box be changed?

Question

I need to create a login form for a random user and when the password is incorrect the password box needs to turn red (border-color) and when the password is correct it needs to turn green. Can you help me with the Javascript code? If I make any mistakes, please forgive my English. Thanks.

I tried this but the color didn't change.

var users = [{
  username: 'new_user',
  password: "123456789",
}]


function login(email, password) {
  var email = document.getElementById("email").value
  var password = document.getElementById("password").value

  for (var user of users) {

    if ((email === user.email || email === user.username) && password === user.password) {
      var block = document.querySelector('.nav');
      block.style.display = "block"
      var errMsg = document.querySelector('.loginForm .errorMessage')
      errMsg.style.display = "none"
      var form = document.querySelector('.loginForm')
      form.style.display = "none"
      var name = document.getElementById("user-name")
      name.innerHTML = user.name;
      loggedUser = user;
      clearValue("email");
      clearValue("password")
    } else {
      var errMsg = document.querySelector('.loginForm .errorMessage')
      errMsg.style.display = "block"
      var passwordBox = document.querySelector(".loginForm input.password")
      passwordBox.style.border.color = "red"
    }
  }
}

<div id="loginForm" class="loginForm">
  <h1>Log in</h1>
  <input id="email" type="text" class="email" placeholder="email or username">
  <input onkeyup="loginOnEnter(event)" id="password" type="password" class="password" placeholder="password">
  <p class="errorMessage">*Please enter a valid password</p>
  <button onclick="login()" class="login-btn">Login</button>
</div>

Answer 1

could be your CSS. try it:

style.borderColor = 'red';